/* the look: the whole of it, and the only place it is said. every slide, the site and every svg in the
   folder use this file and nothing else — a new look is a change here, never a style on a page. */

/* one face for everything said: under, a font that is not drawn but built from rules, like an engineer's
   drawing. the mark alone is drawn, by his hand: the SH he signs his paintings with, as outlines in logo.svg */
@font-face { font-family: 'under'; src: url(type/under.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

/* the palette, each colour named by what it does, never how it looks. two are decided, paper and ink; the rest
   follow from them. five more are hidden: the colour found between the lines of a drawing, wherever the mouse
   is, the potential in it. they are spring's, as they were sampled from its posters. they never stand on their own */
:root {
  --paper:  #f8f6f0;   /* the ground: a clean warm white */
  --ink:    #1d1c1a;   /* the voice: near black, the mark, the words, every line of a drawing */
  --found-1: #db9ac4;  /* the found: a space in a drawing, filled where the mouse finds it. orchid */
  --found-2: #c96be7;  /* violet */
  --found-3: #cb5e05;  /* orange */
  --found-4: #e69779;  /* coral */
  --found-5: #d9e565;  /* lime */


  --font:    "under", "Helvetica Neue", sans-serif;      /* everything said */
  --mono:    var(--font);                                /* labels and numbers: the same face, in capitals */
  --display: var(--font);                                /* the big moments: the same face, larger */
  --weight:  250;      /* one weight, thin, everywhere */

  --clear:  .25;
  --mark:   10rem;     /* the logo's one size on a slide, wherever it is shown alone; the sizes slide is the exception */       /* the mark's room to breathe: nothing comes closer than this share of its height */

  --bg: var(--paper);
  --fg: var(--ink);
}
/* the ground turned over: ink becomes the ground and paper the voice, for everything inside */
.on-ink { --bg: var(--ink); --fg: var(--paper); background: var(--bg); color: var(--fg); }
/* a found colour as the ground, for a post or a story: ink speaks on every one of them */
.on-found-1 { --bg: var(--found-1); --fg: var(--ink); background: var(--bg); color: var(--fg); }
.on-found-2 { --bg: var(--found-2); --fg: var(--ink); background: var(--bg); color: var(--fg); }
.on-found-3 { --bg: var(--found-3); --fg: var(--ink); background: var(--bg); color: var(--fg); }
.on-found-4 { --bg: var(--found-4); --fg: var(--ink); background: var(--bg); color: var(--fg); }
.on-found-5 { --bg: var(--found-5); --fg: var(--ink); background: var(--bg); color: var(--fg); }
/* the quiet and the line are mixed from whatever ground they land on */
:root, .on-ink, .on-found-1, .on-found-2, .on-found-3, .on-found-4, .on-found-5 {
  --muted:  color-mix(in srgb, var(--fg) 50%, var(--bg));
  --border: color-mix(in srgb, var(--fg) 28%, var(--bg));
}

/* the type scale. 1rem is 16px on a 1920 slide, and the same 16px in an svg, so one class is one size
   everywhere. .display is a slide's one big moment and .h1 a title: nothing sits between them */
.display, .h1, .h2, .h3, .h4, .body, .caption { font-family: var(--font); font-weight: var(--weight); fill: var(--fg); }
.display { font-size: 9rem; line-height: 1.1; }
.h1      { font-size: 4rem; line-height: 1.15; }
.h2      { font-size: 3rem; line-height: 1.2; }
.h3      { font-size: 2rem; line-height: 1.28; }
.h4      { font-size: 1.5rem; line-height: 1.33; }
.body    { font-size: 1.25rem; line-height: 1.5; }
.caption { font-size: .875rem; line-height: 1.5; }

/* a label: the mono, in capitals. for naming things, never for sentences */
.caps { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .8em; }

/* colour, said by role — `color` for a page, `fill` and `stroke` for an svg */
.fg      { fill: var(--fg); }
.muted   { color: var(--muted); fill: var(--muted); }
.dim     { opacity: .4; }
text { white-space: pre; }

/* a page */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: var(--weight); }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: inherit; }
svg[data-logo] { display: block; height: 3rem; width: auto; overflow: visible; }

/* a word not answered yet shows its question, quietly */
.ask { opacity: .4; }
.ask::first-letter { text-transform: uppercase; }


/* ---- the deck: a slide is 120 by 67.5rem, whatever the screen ---- */

html:has(> body.slide) { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }
.slide { height: 100vh; overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* the title block: the name, then what the slide is (brand.js) */
.slide > header { position: relative; padding: 2.5rem 2.5rem 0; }
.slide > header > * { font-size: 2rem; line-height: 1.28; }
.slide > header > .aside { position: absolute; top: 2.5rem; right: 2.5rem; font-size: .875rem; line-height: 2.56; color: var(--muted); }

:where(.slide > main) { flex: 1; min-height: 0; padding: 0 2.5rem; }

/* what the chapter asks, and the test it has to pass */
.slide > footer {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.375rem 2.5rem;
  align-content: end; margin-top: auto; padding: 0 2.5rem 2.5rem;
  font-size: 1.25rem; line-height: 1.375; color: var(--muted);
}
.slide > footer > p:only-child { grid-column: span 2; }
.slide > footer.ask { opacity: 1; }   /* already said quietly: a question here reads at the footer's own weight */

.middle { display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; }

/* the mark, alone */
.mark { display: flex; align-items: center; justify-content: center; }
.mark svg[data-logo] { height: var(--mark); }
.mark .lockup { --h: var(--mark); }

/* every size, halving down to the smallest it is ever shown */
.sizes { display: flex; align-items: center; justify-content: space-evenly; }
.sizes > :nth-child(1) { height: 30rem; }
.sizes > :nth-child(2) { height: 15rem; }
.sizes > :nth-child(3) { height: 7.5rem; }
.sizes > :nth-child(4) { height: 3.75rem; }
.sizes > :nth-child(5) { height: 1.875rem; }

/* the room around the mark: the mark's own box, and the clear space at --clear of its height */
.space { display: grid; place-items: center; }
.space .clear { --h: var(--mark); padding: calc(var(--h) * var(--clear)); outline: 1px solid var(--border); }
.space .clear svg[data-logo] { height: var(--h); outline: 1px dashed var(--border); }

/* the palette, read off this file */
.palette { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.palette .swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: 1.5rem; outline: 1px solid var(--border); outline-offset: -1px; }

/* the six answers */
.answers { display: grid; align-content: center; }
.answers section { display: grid; grid-template-columns: 37.5rem 1fr; border-top: 1px solid var(--border); padding: 3.5rem 0 1.5rem; }

/* the five dials, as what was decided: a column each, the pole it leans to in ink above the other, its number,
   and why it sits there */
.personality { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.5rem; align-content: center; padding: 2.5rem; }
.personality .dial { display: grid; grid-template-rows: auto auto 8rem; gap: 1rem; align-content: start; }
.personality .why { margin-top: 1rem; font-size: 1.25rem; line-height: 1.375; color: var(--muted); }
.personality .why.ask { opacity: 1; }

/* the story */
.story { padding-top: 2.5rem; padding-left: 36.625rem; }
.story p { font-size: 2rem; line-height: 2.25rem; }

/* the specimen: every number on it is read off this file */
.specimen { display: grid; grid-template-columns: minmax(0, 1fr) 32.5rem; column-gap: 12.5rem; padding-top: 2.5rem; padding-right: 18.125rem; }
.specimen section { display: flex; flex-direction: column; }
.specimen .note { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .5rem; }
.specimen > section:first-child .note { margin-top: 2.5rem; max-width: 54.375rem; }
.specimen .glyphs { margin-top: auto; padding-bottom: 4rem; line-height: 1.5; }
.specimen .scale { gap: 2.75rem; }
.slide > footer.paragraph { color: var(--fg); border-top: 1px solid var(--border); margin: 0 2.5rem; padding: 2.5rem 0; }
.slide > footer.paragraph > p { grid-column: auto; }

/* a printed thing, drawn flat and standing on the slide, until it is photographed */
.thing { display: flex; align-items: center; justify-content: center; gap: 4rem; flex-wrap: wrap; padding: 2.5rem; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo.graded { object-position: 62% 30%; filter: sepia(.22) saturate(.88) contrast(1.04) brightness(.94); }   /* his photograph, as it is on the site */

/* a page shown whole */
.bleed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ---- the flats: every printed thing, drawn flat, at its own proportion. a .flat with an id is one print ---- */

.flat { position: relative; box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
        outline: 1px solid var(--border); flex: none; overflow: hidden; }
.flat > .foot { margin-top: auto; }
.flat.card      { width: 34rem; height: 22rem; padding: 2.25rem; }
.flat.card.front { align-items: center; justify-content: center; }
.flat.card.front svg[data-logo] { height: 12rem; }   /* 30 mm on an 85 by 55 card, the smallest a blind press holds */
.flat.blind { --fg: color-mix(in srgb, var(--ink) 16%, var(--paper)); }   /* pressed into the paper, no ink */
.flat .top { display: flex; justify-content: space-between; align-items: flex-start; }
/* social: a square post, a tall story and a wide header: the mark alone, or a photograph, and a line of ours
   over it, at the top, at the foot or in the middle, on a shade that keeps it readable */
.flat.post   { width: 21rem; height: 21rem; padding: 1.5rem; }
.flat.story  { width: 13.5rem; height: 24rem; padding: 1.25rem; }
.flat.banner { width: 42rem; height: 14rem; padding: 2rem; justify-content: center; }
.thing:has(.story) { gap: 2rem 2.5rem; align-content: center; }
.thing:has(.post) { display: grid; grid-template-columns: repeat(4, max-content); gap: 2rem 2.5rem; align-content: center; }
.flat.banner .lockup { --h: 6rem; }
.flat > :not(.photo, canvas) { position: relative; z-index: 1; }
.flat > canvas[data-draw] { position: absolute; inset: 0; width: 100%; height: 100%; }
.flat.on-photo { --fg: var(--paper); }
.flat.on-photo.light { --fg: var(--ink); }
.flat:is(.shade-foot, .shade-top, .shade-all)::after { content: ""; position: absolute; inset: 0; }
.flat.shade-foot::after { background: linear-gradient(to top, color-mix(in srgb, var(--ink) 70%, transparent), transparent 60%); }
.flat.shade-top::after  { background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 60%, transparent), transparent 45%); }
.flat.shade-all::after  { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.flat .foot { margin-top: auto; }
.flat .mid  { margin: auto 0; }
.flat .label { font-size: .75rem; }
.flat.story .body { font-size: .8rem; line-height: 1.35; }
.flat svg[data-logo].mid   { height: 7rem; margin: auto; }
.flat svg[data-logo].small { height: 2.75rem; align-self: flex-start; }
.flat svg[data-logo].foot  { margin-top: auto; }
.flat .say { font-size: 1.5rem; line-height: 1.12; letter-spacing: -.02em; }
.flat .say.big { font-size: 2.25rem; }
.flat.story .say { font-size: 1.25rem; }


/* ---- the site ---- */

.site { font-size: 1.125rem; line-height: 1.45; }
.site a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.site .wrap { padding: 0 2rem; box-sizing: border-box; }   /* the page is the whole screen, edge to edge */

/* the mark, and the name in full stacked beside it, a word a line: the top of the name level with the top of the H, the last line on the foot of the F */
.lockup { --h: 3.87rem; display: inline-flex; align-items: center; gap: calc(var(--h) * .18); color: inherit; text-decoration: none; }
.site a.lockup { text-decoration: none; }
.lockup svg[data-logo] { height: var(--h); }
.lockup.under { flex-direction: column; }
.lockup.under .name { text-align: center; padding-top: 0; }
.lockup .name { width: min-content; font-size: calc(var(--h) * .2476); line-height: 1.09; font-optical-sizing: none; padding-top: .188em; }

.site .top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.site .top nav { display: flex; gap: 1.75rem; font-size: .8125rem; }
.site .top nav a { text-decoration: none; }
.site .top nav a:hover { text-decoration: underline; }

@media (max-width: 40rem) {
  .site .wrap { padding-left: 1rem; padding-right: 1rem; }
}

/* ---- the front page: one screen and nothing to scroll. a drawing in ink is the centre and fills it; the words
   sit small at the edges. point at a thing and the drawing becomes it; point at the mark and
   he takes the screen ---- */

.one { height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.one > .wrap { width: 100%; }
.site.one .top { padding-top: 1.25rem; padding-bottom: 1.25rem; align-items: flex-start; }
.site.one main.wrap { padding-bottom: 1.25rem; }
/* the foot of the page says one thing at a time, in one voice: the line, or, while you point at the mark, him.
   pointing at the mark or tapping it opens it (.open, drawings.js), and a tap anywhere else closes it; the keyboard opens it by focus */
.one main { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); }
.one main > * { grid-area: 1 / 1; align-self: end; }
.one .statement.him { opacity: 0; transition: opacity .9s ease; }
.one main > h1 { transition: opacity .9s ease; }
.one:has([data-art="shakked"]:is(.open, :focus-visible)) .statement.him { opacity: 1; }
.one:has([data-art="shakked"]:is(.open, :focus-visible)) main > h1 { opacity: 0; }

.one .lockup { --h: clamp(2.75rem, 4.4vw, 4.25rem); cursor: default; outline: none; position: relative; }
/* the logo here is the object, standing still (mark3d.js): its canvas is the mark's height and a third more, and as
   much wider than the mark, centred on where the flat mark sits */
.one .lockup .solid { position: absolute; width: calc(var(--h) * (1332 / 1070 + .35)); height: calc(var(--h) * 1.35); left: calc(var(--h) * -.175); top: calc(50% - var(--h) * .675); pointer-events: none; }
.one .lockup.alive svg[data-logo] { visibility: hidden; }
/* the name beside it comes only when you point at it */
.one .lockup .name { opacity: 0; transition: opacity .6s ease; }
.one .lockup:is(.open, :focus-visible) .name { opacity: 1; }
.one .statement { font-size: clamp(1.25rem, 3.3vw, 5rem); line-height: 1.1; letter-spacing: -.02em; max-width: 50vw; }   /* half the page */
.one .top nav { display: flex; gap: 1.75rem; font-size: .75rem; }
.one .top nav a { padding: .3rem 0; text-decoration: none; border-bottom: 2px solid transparent; }
.one .top nav a:is(:hover, :focus) { border-bottom-color: var(--fg); text-decoration: none; outline: none; }
/* a way in, opened (forms.js): its form, on paper, takes the right of the screen under the links; the line stays
   beside it, and the link stays underlined while its form is open */
.one main { grid-area: 2 / 1; }
.one > dialog.form { grid-area: 2 / 1; justify-self: end; position: relative; inset: auto; z-index: 1; margin: 0 2rem 1.25rem 0; padding: 0;
                     width: min(34rem, 48vw); height: auto; max-width: none; max-height: none; border: 0; border-left: 1px solid var(--border);
                     background: var(--bg); color: var(--fg); }
/* the form itself: paper and ink, nothing boxed. a question is a line of words over a line to write on; a part is
   named in capitals; it scrolls inside its panel, never the page */
.one > dialog.form { overflow-y: auto; overscroll-behavior: contain; }
.form form { display: grid; gap: 1.5rem; padding: 1.5rem 1.75rem 2rem; font-size: .9375rem; line-height: 1.45; }
.form form > p { color: var(--muted); }
.form form > p:first-child { color: var(--fg); font-size: 1.25rem; line-height: 1.3; }
.form h2.caps { margin-top: 1.25rem; font-size: .6875rem; }
.form :is(label, fieldset) { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.form .need > .q::after { content: " *"; color: var(--muted); }
.form :is(input, textarea) { font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--border);
                             border-radius: 0; padding: .35rem 0; width: 100%; box-sizing: border-box; }
.form textarea { resize: vertical; }
.form :is(input, textarea):focus { outline: none; border-bottom-color: var(--fg); }
.form ::placeholder { color: var(--muted); opacity: .7; }
.form .choice { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; }
.form .choice input { width: auto; flex: none; accent-color: var(--fg); }
.form legend { padding: 0; }
.form .doc { justify-self: start; text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: .1rem; }
.form .doc::after { content: " ↓"; color: var(--muted); }
.form .doc:hover { border-bottom-color: var(--fg); }
.form .ask-file input { border: 0; padding: 0; font-size: .8125rem; color: var(--muted); }
.form ::file-selector-button { font: inherit; color: var(--fg); background: transparent; border: 1px solid var(--border); padding: .4rem .9rem; margin-right: .75rem; cursor: pointer; }
.form .hint, .form .said { color: var(--muted); font-size: .8125rem; }
.form button { justify-self: start; font-size: .75rem; color: var(--bg); background: var(--fg); border: 0; padding: .7rem 1.4rem; cursor: pointer; }
.form button:disabled { opacity: .4; cursor: default; }
.form .trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.form .sent { padding: 1.5rem 1.75rem; font-size: 1.25rem; line-height: 1.3; }
.one .top nav a.open { border-bottom-color: var(--fg); }
@media (max-width: 40rem) { .one > dialog.form { margin: 0; width: 100%; border-left: 0; border-top: 1px solid var(--border); } }
/* the line is finished by the pillar whose drawing is on the screen, one sentence at one size: the words lie on
   top of each other in one cell and take their turn with the drawings */
.one .statement .turns { display: inline-grid; justify-items: start; }
.one .statement .turns > * { grid-area: 1 / 1; }

/* the drawings: all of them laid over the whole screen, one shown at a time */
.arts { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
/* only lines, and every line one pixel at any size: what was a band is one more line, what was a field its
   outline. the points are small, a prick of the pen */
.art :is(.wire, .dot, .shape) { fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.art .node   { fill: var(--fg); }
/* each drawing draws itself in when it is shown: lines first, then what sits on them */
.art .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.2, .7, .2, 1); }
.art .pop  { opacity: 0; transition: opacity .45s ease .4s; }

/* the drawings are alive: design/drawings.js draws each on one canvas, every moment, with a motion of its own and
   an answer to the mouse. the svgs are the same drawings standing still, for a page with no script */
.live { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the word that finishes the line: the one whose drawing is on the screen */
.one .statement .turns > * { opacity: 0; transition: opacity .9s ease; }
.one .statement .turns > .on { opacity: 1; }
/* with no script, the first drawing stands still, drawn */
.art-education { transition: none; }
.one:not(.moving) .art-education { opacity: 1; }
.one:not(.moving) .art-education .draw { stroke-dashoffset: 0; }
.one:not(.moving) .art-education .pop { opacity: 1; }
.one:not(.moving) .turns > :first-child { opacity: 1; }

/* the one photograph: him, when you point at the mark. a warm grade, a shade at the left for the words,
   and while he is shown the page turns to paper on the picture */
.art-shakked { background: var(--ink); overflow: hidden; transition: opacity .8s ease; }
.art-shakked img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
             filter: sepia(.22) saturate(.88) contrast(1.04) brightness(.94);
             transform: scale(1.06); transition: transform 7s cubic-bezier(.2, .6, .2, 1); }
.one:has([data-art="shakked"]:is(.open, :focus-visible)) .art-shakked { opacity: 1; }
.one:has([data-art="shakked"]:is(.open, :focus-visible)) .art-shakked img { transform: scale(1); }
.one:has([data-art="shakked"]:is(.open, :focus-visible)) { --bg: var(--ink); --fg: var(--paper); color: var(--fg); }

/* what just happened: a few seconds of film, small, in the corner opposite the line, and one line under it.
   it plays on its own, silent, over and over; when he takes the screen it gives way */
.one .update { justify-self: end; margin: 0; width: clamp(10rem, 17vw, 17rem); display: flex; flex-direction: column; gap: .5rem; transition: opacity .9s ease; }
.one .update video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--border); }
.one .update figcaption { display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; line-height: 1.3; }
.one .update .caps { font-size: .6875rem; }
.one .update video { cursor: zoom-in; outline: none; }
/* pressed, the film fills the window, whole, on ink, over everything */
.one .update.open video { position: fixed; inset: 0; z-index: 50; width: 100vw; height: 100svh; aspect-ratio: auto;
                          object-fit: contain; background: var(--ink); cursor: zoom-out; }
.one:has([data-art="shakked"]:is(.open, :focus-visible)) .update { opacity: 0; }

/* him: his photograph, darker toward the foot where the words about him stand */
.art-shakked img { object-position: 62% 30%; }
.art-shakked::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 78%, transparent), color-mix(in srgb, var(--ink) 45%, transparent) 45%, transparent 72%),
              linear-gradient(to bottom, color-mix(in srgb, var(--ink) 50%, transparent), transparent 24%); }

@media (prefers-reduced-motion: reduce) {
  .art, .art .draw, .art .pop, .art-shakked img { transition: none; }
  .art-shakked img { transform: none; }
}
@media (max-width: 60rem) {
  .one .top nav { display: flex; flex-direction: column; align-items: flex-end; font-size: .6875rem; }
  .site.one .top { gap: .5rem; }
  .one .top nav a { white-space: nowrap; }
  .art-shakked img { object-position: 68% 30%; }
}

/* on a phone half is too narrow to read: the words take the width */
@media (max-width: 40rem) {
  .one .statement { font-size: 1.625rem; max-width: none; }
  /* and the film stands above them, at the right */
  .one main { grid-template-rows: auto auto; row-gap: 1.25rem; }
  .one main > .statement { grid-row: 2; }
  .one .update { grid-row: 1; width: 9.5rem; }
}

/* ---- the deck's first and last slide: a point, and a line. it leaves the point to the right at the opening;
   at the close it comes in from the left and closes into a circle around it ---- */
.sign { flex: 1; min-height: 0; width: 100%; }
.sign path { fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke;
             stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: sign-draw 2.8s cubic-bezier(.6, 0, .2, 1) .9s forwards; }
.sign .point { fill: var(--fg); opacity: 0; animation: sign-appear .7s ease .2s forwards; }
.sign .point.late { animation-delay: 3.6s; }
@keyframes sign-draw { to { stroke-dashoffset: 0; } }
@keyframes sign-appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sign path, .sign .point { animation: none; stroke-dashoffset: 0; opacity: 1; } }

/* ---- the mark as an object, alone on a slide (mark3d.js) ---- */
.stage { position: relative; flex: 1; min-height: 0; }
.stage .solid { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- the forms of the logo on a slide ---- */
.variations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem; flex: 1; min-height: 0; }
.variations section { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.variations .show { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3rem; }
.variations .show > svg[data-logo] { height: var(--mark); }
.variations .lockup { --h: var(--mark); }
.variations .show > svg:nth-child(2) { height: 4rem; }
.variations .show > svg:nth-child(3) { height: 2rem; }

/* ---- the drawings on a slide, side by side and alive ---- */
.contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 2.5rem; align-content: center; }
.contact canvas { display: block; width: 100%; aspect-ratio: 3 / 2; }

/* ---- his hand: the SH he signs every painting with, twelve times, traced (design/sh) ---- */
.hand { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
.hand .morph { flex: 1; min-height: 60vh; width: 100%; display: block; cursor: pointer; }
.hand .signs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.hand .signs button { all: unset; cursor: pointer; background: var(--bg); aspect-ratio: 2 / 1; display: flex; }
.hand .signs svg { width: 100%; height: 100%; }
.hand .signs path { fill: var(--muted); transition: fill .3s; }
.hand .signs button:hover path, .hand .signs button.now path { fill: var(--fg); }
@media (max-width: 700px) { .hand .signs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the F tried beside his SH, side by side (design/sh/f) */
.hand .tries { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--border); }
.hand .tries figure { margin: 0; background: var(--bg); padding: 0 0 1rem; }
.hand .tries img { width: 100%; aspect-ratio: 8 / 5; display: block; }
.hand .tries figcaption { font-family: var(--mono, monospace); font-size: .75rem; color: var(--muted); padding: 0 1rem; }