/* ==========================================================================
   Home: the chapter (Perspective, Taste, Intuition), work, contact
   ========================================================================== */

/* --- Essay chapters ------------------------------------------------------ */

.chapter { padding: 22vh 0 6vh; }
/* Sidenote: "the basics" carries a small number, and the facts sit level with it in the right margin, like a well-set essay */
.prose:has(.sidenote) { position: relative; }
/* The dotted line under "the basics" draws in from the left once you reach it, then the 1 rolls in after it */
.sn-t { position: relative; }
/* (the dots are laid by home.js, one by one: each lands a little large and settles to size) */
.sn-t { position: relative; }
.sn-dots { position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; display: flex; justify-content: space-between; pointer-events: none; }
.sn-dots i { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-soft); opacity: 0; scale: 2.6;
  transition: opacity .25s, scale .55s cubic-bezier(.3,1.5,.5,1), background .3s; }
.sn.drawn .sn-dots i { opacity: 1; scale: 1; transition-delay: calc(var(--i) * 28ms); }
.sn sup { font: 500 .55em var(--sans); color: var(--blue-ink); margin-left: 1px; padding: 0 1px; border-radius: 3px;
  opacity: 0; translate: -.6em 0; filter: blur(3px); transition: background .3s, opacity .4s var(--ease), translate .7s cubic-bezier(.3,1.4,.5,1), filter .5s var(--ease); }
.sn.drawn sup { opacity: 1; translate: 0 0; filter: none; transition-delay: 0s, var(--sup-d, .65s), var(--sup-d, .65s), var(--sup-d, .65s); }
.sidenote { position: absolute; left: calc(100% + 32px); width: 200px;   /* left is refined in home.js: just past the paragraph's measure */
  font: 400 14px/1.55 var(--sans); color: var(--ink-soft); padding-top: 10px; }
/* Its entrance, once you've scrolled to it: the number in the text pings, a rule draws out from it,
   the note's 1 pops, then the three facts settle in one by one */
.sidenote::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; scale: 0 1;
  transition: scale .9s cubic-bezier(.32,.72,0,1) .15s, background .3s; }
.sidenote > * { opacity: 0; filter: blur(5px); translate: -10px 0; transition: opacity .6s var(--ease), filter .7s var(--ease), translate .8s cubic-bezier(.32,.72,0,1); }
.sidenote > b { display: inline-block; translate: 0 0; scale: .3; transition: opacity .3s, filter .3s, scale .55s cubic-bezier(.3,1.7,.5,1); }
.sidenote.shown::before { scale: 1 1; }
.sidenote.shown > * { opacity: 1; filter: none; translate: 0 0; transition-delay: calc(.45s + var(--i, 0) * 110ms); }
.sidenote.shown > b { scale: 1; transition-delay: .35s; }
.sidenote > span:nth-of-type(1) { --i: 1; } .sidenote > span:nth-of-type(2) { --i: 2; } .sidenote > span:nth-of-type(3) { --i: 3; }
.sn.ping sup { animation: sn-ping 1.1s cubic-bezier(.3,1.5,.5,1); }
@keyframes sn-ping { 0% { background: transparent; scale: 1; } 25% { background: var(--blue-soft); scale: 1.5; } 100% { background: transparent; scale: 1; } }
.sn sup { display: inline-block; }
.sidenote b { font-weight: 500; color: var(--blue-ink); margin-right: 4px; }
.sidenote > span { display: block; color: var(--ink); }
/* Point at either one and both light up */
.lit .sn-dots i { background: var(--blue-ink); }
.lit .sn sup { background: var(--blue-soft); }
.lit .sidenote::before { background: var(--blue-ink); }
@media (max-width: 1360px) { .sidenote { position: relative; width: auto; max-width: 31em; margin: -.3em 0 1.6em; } }
.chapter .kicker { margin-bottom: 5vh; }
.chapter .display { margin-bottom: 7vh; }
.pull { width: min(1100px, 100% - var(--gutter) * 2); margin: 16vh auto; }
.pull .display { max-width: 13em; }

.triad { font-family: var(--serif); font-size: clamp(64px, 12vw, 170px); line-height: .9; letter-spacing: -.035em; margin: 24vh 0 10vh; }
/* Taste: click to swap through five very different typefaces */
.triad .taste { cursor: pointer; width: max-content; outline: none; height: .9em; }   /* one line, always: no face can push Intuition down */
/* The word changes size per face, but never the height of its line */
.taste-in { display: inline-block; line-height: 0; vertical-align: baseline; white-space: nowrap; }
/* Swashy faces (Ballet) spill over Perspective: only Taste's own line takes the pointer, and it's never part of a text selection */
.triad .taste { user-select: none; -webkit-user-select: none; }
.taste-in { pointer-events: none; }
/* Safari cuts a letter off at the edge of the word's box (it draws the word in its own layer), and the script's T and
   e reach well past it: give the word room either side, taken back with a negative margin so nothing moves */
.taste-in, .taste-in .w { padding-inline: .6em; margin-inline: -.6em; }
/* The face's name, fading in beside the word as it lands, in the small mono the tools use. It's in the word's line (a
   box with no width, so it takes no room), so it sits on the same baseline as whichever face is showing */
.taste-name { display: inline-block; width: 0; margin-left: 22px; vertical-align: baseline; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; font-style: normal; letter-spacing: 0;
  color: var(--ink-faint); white-space: nowrap; opacity: 0; pointer-events: auto; user-select: text; -webkit-user-select: text; cursor: text; }   /* (shown and faded by the script, with the word; selectable, so the name can be copied) */
.taste-name::selection { background: var(--blue-soft, #dbe8f5); color: var(--ink); }
.triad .taste:focus-visible { box-shadow: 0 0 0 2px var(--blue-ink); border-radius: 8px; }

/* "Human" sits at the start of the line, uncovered left to right (H first) as Intuition slides right by --x: its box
   is --x wide and hides the rest (a box, not a clip-path: an iPhone drew the word soft under a clip) */
.triad .intu { position: relative; --x: 0px; --xe: 0; }
.intu-h { position: absolute; left: 0; top: 0; white-space: nowrap; width: calc(var(--x) + var(--xe) * var(--ib, 0px)); overflow: hidden; transform: translateZ(0); }
/* (--ib: how far in the I's ink starts, so Human runs right up to it, home.js. translateZ: an iPhone otherwise lets the
   word's canvas, which it draws on its own layer, show past the box while Intuition springs back) */
/* Its three photo copies share one cell, on the same baseline; the space after the word follows in the next (home.js) */
.intu-h { display: grid; grid-auto-flow: column; justify-content: start; align-items: baseline; }
.intu-h > .w { grid-area: 1 / 1; }
.intu-h { --scene: none; }
/* Drawn in a canvas (home.js): the text underneath only holds the space */
.intu-h.cv .w { background: none; color: transparent; }
.intu-h > canvas { position: absolute; pointer-events: none; }
.intu-h .w, .intu-h:not(:has(.w)) { background-image: var(--scene); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.intu-track { position: relative; z-index: 1; display: inline-block; white-space: nowrap; cursor: grab; touch-action: pan-y; translate: var(--x) 0; }
.intu-track.grabbing { cursor: grabbing; }
.triad > span { display: block; }
/* An optical correction: Perspective's baseline to Taste's cap matched Taste's baseline to Intuition's, but the p hanging
   into the gap made the top pair read a little tighter. A touch more under Perspective evens them out to the eye on a phone */
@media (max-width: 700px) { .triad > .persp { margin-bottom: .025em; } }   /* (a phone only: at desktop size the even spacing reads right as it is) */
/* Letter by letter, like the name (home.js): the words are there at once, their letters focus in one after another */
.triad .w:has(.tl) { --ro: 1; transition: none; }
/* Hidden at once (no fade out: Perspective's letters may already be on screen when they're marked), then the
   entrance runs once its own class is on, with the delays set */
.tl { display: inline-block; opacity: 0; filter: blur(18px); translate: 0 .12em; }
.tl-on .tl { opacity: 1; filter: none; translate: 0 0;
  transition: opacity 1.6s var(--ease), filter 1.6s var(--ease), translate 1.6s var(--ease); transition-delay: var(--ld, 0ms); }
/* Perspective: select it to see its anatomy (letters to outline, boxes and the type's guides; drawn in home.js) */
.persp { position: relative; cursor: text; }
.persp .pl { display: inline-block; position: relative; }
.persp ::selection { background: transparent; color: var(--ink); }
.persp .pl.s::selection { color: transparent; }
/* The outline is there on every letter, shown by selecting it or hovering it: --lf takes the letter from its fill to its
   outline, --hv brings in its box (each 0 to 1, set and eased in home.js) */
@property --hv { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lf { syntax: "<number>"; inherits: true; initial-value: 0; }
.persp .pl { -webkit-text-fill-color: color-mix(in srgb, currentColor calc(100% - var(--lf, 0) * 100%), transparent); }
.persp .pl.s { -webkit-text-fill-color: transparent; }
.persp .pl::after { content: attr(data-c); position: absolute; left: 0; top: 0; color: #000; -webkit-text-fill-color: #000; pointer-events: none; opacity: var(--lf, 0); filter: url(#persp-outline); }   /* (the outside edge only: index.html's filter) */
.persp .pl.s::after { opacity: 1; }
/* (the boxes sit half the word's tracking to the right: tight tracking takes the space off each letter's right side,
   which left the boxes a few px left of the letters) */
.persp .pl::before { content: ""; position: absolute; left: .0175em; right: -.0175em; top: var(--bt, 0); height: var(--bh, 100%); pointer-events: none;
  background: rgba(156,198,236,.12); box-shadow: inset 0 0 0 1px rgba(45,106,168,.35); opacity: var(--hv, 0); }
.persp .pl.s::before { opacity: 0; }   /* (a selection draws its own boxes) */
.persp-hover { opacity: 0; }
.persp-guides { user-select: none; -webkit-user-select: none; position: absolute; left: -20%; top: -40%; width: 140%; height: 180%; pointer-events: none; overflow: visible; }
.persp-guides line { stroke: var(--blue-ink); stroke-width: 1; }
.persp-guides rect { fill: rgba(156,198,236,.12); stroke: rgba(45,106,168,.35); stroke-width: 1; }
.persp-guides text { font: 500 11px "IBM Plex Mono", monospace; fill: var(--blue-ink); letter-spacing: 0; }



/* --- Selected work -------------------------------------------------------- */

.work { width: min(1240px, 100% - var(--gutter) * 2); margin: 0 auto; padding: 22vh 0 12vh; scroll-margin-top: 40px; }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 8vh; flex-wrap: wrap; }

.work-head p { color: var(--ink-soft); max-width: 24em; }

.project { display: block; text-decoration: none; color: inherit; }
.grid3 > .reveal:nth-child(2) { transition-delay: .12s; }   /* the three arrive one after another, like the tools */
.grid3 > .reveal:nth-child(3) { transition-delay: .24s; }
.project .shot { border-radius: 16px; overflow: hidden; background: var(--paper-deep); aspect-ratio: 16 / 10; }
.project .shot img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.project:hover .shot img { scale: 1.025; }
.project .meta { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding-top: 20px; }
.project .cat { font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); grid-column: 1 / -1; }
.project h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; transition: color .3s; }
.project p { color: var(--ink-soft); font-size: 16px; max-width: 30em; grid-column: 1; }
.project .go { font-size: 22px; align-self: start; padding-top: 8px; transition: color .3s; }
.project .go i { font-style: normal; display: block; }
.project:hover h3, .project:hover .go { color: var(--blue-ink); }
/* Hover: the arrow leaves the way it points and a fresh one slides in behind it (up-right for links that open elsewhere) */
.project .go { overflow: hidden; }
.project .go i { --dx: 1.1em; --dy: 0em; text-shadow: calc(var(--dx) * -1) calc(var(--dy) * -1) currentColor; transition: translate .55s var(--ease); }
.project[target] .go i { --dy: -1.1em; }
.project:hover .go i { translate: var(--dx) var(--dy); }
@media (prefers-reduced-motion: reduce) { .project .go i { transition: none !important; } }

/* Logo tile: lighten blend drops the image's own dark box into the tile colour */
.project .shot.logo { background: #2b2b2b; position: relative; }
.project .shot.logo img { position: absolute; inset: 0; margin: auto; width: auto; height: 58%; object-fit: contain; mix-blend-mode: lighten; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9vh clamp(20px, 3vw, 40px); }

/* --- Contact -------------------------------------------------------------- */

.contact { width: min(1240px, 100% - var(--gutter) * 2); margin: 0 auto; padding: 16vh 0 22vh; text-align: center; scroll-margin-top: 40px; }
.contact .display { font-size: clamp(52px, 9vw, 140px); max-width: 10em; margin: 0 auto 8vh; }
/* The underline draws in from the left once the address has faded up */
.contact .mail { font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); text-decoration: none; padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color .3s, opacity 1.1s var(--ease), translate 1.1s var(--ease), background-size .9s cubic-bezier(.6,0,.2,1) .5s; }
.contact .mail.in { background-size: 100% 1px; }
.contact .mail:hover { color: var(--blue-ink); }.contact .note { margin-top: 4vh; color: var(--ink-soft); font-size: 16px; }

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 860px) {
}
@media (max-width: 700px) {



  /* The top edge on a small screen (see site.css): frosted behind the nav, fading out below */
  .edge { height: var(--edge-h, 105px); }
}