/*
  evgeny.io, set like a well-made book: one serif, one ink, one left edge.

  Type: Piazzolla by Juan Pablo del Peral (Huerta Tipográfica, OFL, see fonts/OFL.txt), a compact text face
  with optical sizes 8–30. Light at display size, italic as the second voice, real small caps for acronyms,
  text figures in prose, lining tabular figures wherever years are measured. Project names in italic, as
  titles of works.

  Colour: white paper and one ink, blue-black iron-gall ink, in its two states. Wet, it is blue (the dye
  that shows until the iron oxidises); dry, it is near-black. Everything still being drawn is wet: the far
  rows of the sea (a row is laid down at the horizon and dries as it comes towards you), the current job,
  the year counter while it rolls. Everything else is dry. Thinned to a wash (--wet-wash), the wet ink
  shades the years of the job you are reading on the scale. No greys anywhere: secondary text is set smaller
  or in italic, rules are in ink. A click on the water moves the pen on to its next ink (--sea-lights). The
  sea is script.js, set up by the --sea-* properties on .sea below.

  Layout: one column. The header, the headline, the lead, the scale and every section share its left and
  right edges. It is 840px wide and grows with the screen from about 1600px, to 1120px; the headline grows
  with it, its first line filling the column, and so does the lead, which keeps about 64 characters a line.
  Running text keeps a 35em measure. The sea runs edge to edge. The work history is dimensioned on one
  scale, 2012 to now, across the column, and the scale stays pinned while the jobs scroll past, washing the
  years of the one you are reading; a click on it goes to any year.
*/

@font-face { font-family: Piazzolla; src: url(fonts/Piazzolla-VF.woff2) format('woff2'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: Piazzolla; src: url(fonts/Piazzolla-Italic-VF.woff2) format('woff2'); font-weight: 300 500; font-style: italic; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #101217;           /* dry ink */
  --wet: #1f4fc4;           /* wet ink */
  --wet-tint: #dde5fa;      /* selection */
  --wet-wash: rgb(31 79 196 / 0.2);   /* the wet ink thinned to a wash */

  --wrap: clamp(840px, 52vw, 1120px);   /* the column: header, headline, lead, scale, sections */
  --col: var(--wrap);
  --measure: 35em;          /* running text, about 70 characters a line */
  --margin: clamp(20px, 6vw, 96px);
  /* the headline's size: "Building products end to end." on one line of the column at any width; the seas'
     heights follow it */
  --h1: min(var(--fs-h1), calc(var(--wrap) / 12.1), calc((100vw - 2 * var(--margin)) / 12.1));

  --fs-h1: clamp(2.5rem, 1.2rem + 5.2vw, 5.25rem);
  --lh-h1: 1.03;
  --fs-lead: max(clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem), min(1.5vw, 2rem));   /* grows again past 1600px */
  --fs-h2: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  --fs-h3: 1.3125rem;
  --fs-text: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-scale: 0.8125rem;

  --section: clamp(64px, 10vh, 112px);   /* space above a section */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: Piazzolla, 'Iowan Old Style', Georgia, serif;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: var(--fs-text);
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
}
::selection { background: var(--wet-tint); color: var(--ink); }

h1, h2, h3 { font-weight: 400; font-size: inherit; line-height: inherit; }
p, dd { text-wrap: pretty; }
ol, ul { list-style: none; }
em { font-style: italic; }
b { font-weight: 500; }
abbr { text-decoration: none; font-variant-caps: all-small-caps; letter-spacing: 0.035em; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.19em;
  text-decoration-color: var(--wet);
}
a:hover { color: var(--wet); }
a:focus-visible { outline: 2px solid var(--wet); outline-offset: 3px; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }   /* links within the page, and a click on the scale */

/* One left edge for everything */
.wrap { width: min(100% - 2 * var(--margin), var(--wrap)); margin-inline: auto; }

/* Header: the name on the left, how to reach on the right, on one baseline */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 24px;
  padding-block: 20px 18px;
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: nowrap;
}
.top p { white-space: nowrap; }
.mark a { font-size: 1.25rem; font-weight: 500; text-decoration: none; }
.mark a:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--wet); }
.links { display: none; }
.reach a { text-decoration: none; }
.reach a:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--wet); }
.links a { margin-left: 18px; }

/* Hero: the sea, the headline on the water near the horizon. No rule under it: the sea keeps --floor of paper
   below its front row, so the last wave is drawn whole and is where the sea ends */
.hero {
  --floor: 44px;
  position: relative;
  /* the sea is as tall as the headline makes it: a little paper above it, its two lines, and about as much
     water again below them, never under 180 px */
  height: calc(max(180px, var(--h1) * 4.7) + var(--floor));
  overflow: hidden;
}
.sea {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--paper);
  overflow: hidden;
  --sea-paper: #ffffff;
  --sea-far: var(--wet);        /* laid down wet at the horizon */
  --sea-mid: #16307a;           /* half dry */
  --sea-near: #101217;          /* dry, the same ink as the text */
  --sea-light: var(--wet);
  /* a click fills the pen with the next ink: vermilion, violet, turquoise, magenta, and back to the blue */
  --sea-lights: #1f4fc4 #e5422b #6a3bd4 #0a9cb4 #d4196f;
  --sea-dry-from: 0.42;
  --sea-dry-to: 0.92;
  --sea-fade: 0.46;
  --sea-haze: 0.14;
  --sea-crest: #1f4fc4;         /* the crests stay wet */
  --sea-foam: 0.6;
  --sea-glow: 0.34;             /* only the rings a click drops carry colour */
  --sea-wake-glow: 0;
  --sea-wake: 0.3;              /* moving the pointer barely stirs the water */
  --sea-bump: 3;
  --sea-sun: 0;
  --sea-width: 1;
  --sea-floor: var(--floor);
}
.sea canvas { display: block; width: 100%; height: 100%; background: var(--paper); touch-action: pan-y pinch-zoom; }
/* the hero's sea, figures lying on the water (script.js): pale blue inks, wet at the horizon and softer in
   front, the crests a shade deeper, the ink a touch transparent so that crossing strokes darken */
.hero .sea { --sea-far: #5f82dd; --sea-mid: #86a0e6; --sea-near: #a3b4ea; --sea-crest: #4f74d6; --sea-fade: 0.7; --sea-haze: 0.12; --sea-alpha: 0.9; }
/* the foot of the page: a strip of sea under the contacts, drawn as a map legend (sea-foot.js), its front row
   at the very bottom */
.sea-foot { position: relative; height: max(140px, var(--h1) * 3.4); --floor: 0px; overflow: hidden; }
.hero > .wrap {
  position: relative;
  height: 100%;
  padding-top: calc(var(--h1) * 0.9);
  pointer-events: none;          /* the water reacts to the pointer through the headline */
}
.hero h1 {
  font-size: var(--h1);
  white-space: nowrap;
  font-weight: 300;
  line-height: var(--lh-h1);
  letter-spacing: -0.012em;
  /* a paper halo so the ink stays legible over the lines */
  text-shadow: 0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 14px var(--paper), 0 0 26px var(--paper);
}
.hero h1 em { font-weight: 300; }
.no-js .sea, .no-sea .sea, .no-js .sea-foot, .no-sea .sea-foot { display: none; }
.no-js .hero, .no-sea .hero { height: auto; }             /* no sea: no empty water under the headline */
.no-js .hero > .wrap, .no-sea .hero > .wrap { padding-bottom: clamp(32px, 6vh, 64px); }

/* The year counter: a strip of numbers that rolls once on load and stops at the current count */
.count {
  display: inline-block;
  position: relative;
  height: calc(1em * var(--lh-h1));
  overflow: hidden;
  vertical-align: top;
  text-align: left;
  font-variant-numeric: lining-nums tabular-nums;
  transition: color 1.8s ease 0.9s;
}
.count .strip { display: block; will-change: transform; }
.count .strip > span { display: block; height: calc(1em * var(--lh-h1)); line-height: var(--lh-h1); }
.count.roll .strip { transition: transform 1.6s cubic-bezier(0.1, 0.8, 0.15, 1); }
/* the number is written in wet ink and dries as it settles */
@media (prefers-reduced-motion: no-preference) { .js .count:not(.roll) { color: var(--wet); } }
@media (prefers-reduced-motion: reduce) { .count.roll .strip { transition: none; } .count { transition: none; } }

/* Intro: the lead */
.intro { padding-top: clamp(8px, 2vh, 24px); }   /* the paper under the sea is most of the gap */
.intro p { max-width: min(var(--col), 30em); font-size: var(--fs-lead); line-height: 1.45; }   /* about 64 characters a line */

/* Sections: a heading in italic, then the material, all from the same edge */
.work, .projects, .contact { margin-top: var(--section); }
h2 { font-size: var(--fs-h2); font-style: italic; line-height: 1.15; }

/* Work. On phones, the years as plain labels; from 721px, a scale and a dimension line per job. */
.work { --span: 15; --now: 14.72; }
.scale { display: none; }
.work ol { max-width: var(--col); margin-top: 8px; }
.work li { padding-top: 26px; }
.dim { position: relative; }
.dim i { display: none; }
.yrs { font-style: italic; font-variant-numeric: lining-nums tabular-nums; line-height: 1.3; }
.open .yrs { color: var(--wet); }
.yrs .y, .yrs .md, .dim .hit { display: none; }   /* phones: the months are the label, there is no hover */
.work h3 { margin-top: 2px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; }
.work .role { margin-top: 1px; font-size: var(--fs-small); font-style: italic; line-height: 1.4; }
.what { max-width: var(--measure); margin-top: 8px; }

/* Side projects: titles of works, in italic */
.projects ul { max-width: var(--col); margin-top: 14px; }
.projects li + li { margin-top: 14px; }
.projects h3 { font-size: var(--fs-h3); font-style: italic; line-height: 1.3; }
.projects li p { max-width: var(--measure); margin-top: 1px; }
.more { max-width: var(--col); margin-top: 20px; font-style: italic; }

/* Contact, and the end of the page */
.contact { padding-bottom: clamp(40px, 7vh, 72px); }
.contact ul { margin-top: 12px; display: flex; flex-wrap: wrap; column-gap: 36px; row-gap: 4px; font-size: var(--fs-lead); line-height: 1.4; }


/* From 721px: the header gets its links, the work history gets its scale */
@media (min-width: 721px) {
  .top { align-items: baseline; }
  .links { display: inline; }

  html { scroll-padding-top: 64px; }   /* focus and anchors land below the pinned scale */
  .hero { --floor: 64px; }
}

/* From 721px on screens: the work history gets its scale. Print keeps the plain labels, as phones do: a pinned
   scale and labels placed in screen pixels don't survive a page. */
@media screen and (min-width: 721px) {
  /* the scale: one tick a year, from 2012 to the end of this year (the script adds a column each January) */
  /* it stays at the top of the window while the jobs scroll past, so every dimension can be read against it.
     Over the years it keeps room for a job's name, and 4px of paper under its line hide what scrolls beneath. */
  .scale {
    display: grid;
    grid-template-columns: repeat(var(--span), minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 1;
    max-width: var(--col);
    height: 52px;
    margin-top: 4px;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    box-shadow: 0 4px 0 var(--paper);
    cursor: pointer;
    font-size: var(--fs-scale);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .scale::after { content: ''; position: absolute; right: 0; bottom: 0; height: 10px; border-left: 1px solid var(--ink); }
  .scale span { position: relative; align-self: end; height: 6px; border-left: 1px solid var(--ink); }
  .scale span:nth-child(odd) { height: 10px; }
  .scale em { position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
  .scale span:first-child em { transform: none; left: -1px; }
  /* today, in wet ink: where the current job's dimension ends */
  .scale .now { position: absolute; bottom: 0; left: calc(var(--now) / var(--span) * 100%); height: 10px; border-left: 1px solid var(--wet); }
  /* The job you are reading: its years washed in wet ink between the scale's line and the years, the way old
     drawings shaded an area. The wash lies under the ticks (z-index -1 within the pinned scale), stops short of the
     years, which an end falling on a year would cut in two, and moves on transforms only (the script at the end
     of index.html). Under the pointer another job's years are washed paler, its name over them. */
  .scale .wash, .scale .reading {
    position: absolute;
    bottom: 0;
    z-index: -1;
    height: 12px;
    background: var(--wet-wash);
    opacity: 0;
    pointer-events: none;
  }
  .scale .wash { left: calc(var(--a) / var(--span) * 100%); width: calc((var(--b) - var(--a)) / var(--span) * 100%); transition: opacity 0.12s linear; }
  .scale .wash.hover { opacity: 0.45; }
  .scale .reading { left: 0; width: 100%; transform-origin: 0 0; will-change: transform; transition: opacity 0.2s linear; }
  .scale .reading.on { opacity: 1; }
  .scale .tag { position: absolute; top: 4px; left: 0; font-style: italic; white-space: nowrap; opacity: 0; transition: opacity 0.12s linear; pointer-events: none; }
  .scale .tag.show { opacity: 1; }
  .scale.still .wash, .scale.still .reading, .scale.still .tag { transition: none; }
  .work li.docked .dim { opacity: 0; pointer-events: none; }   /* gone under the scale: the wash stands for it now */

  .work ol { margin-top: 0; }
  .work li { padding-top: 4px; }
  .work li + li { margin-top: 30px; }

  .dim { height: 46px; }
  .dim i {
    display: block;
    position: absolute;
    left: calc(var(--from) / var(--span) * 100%);
    width: calc((var(--to) - var(--from)) / var(--span) * 100%);
    bottom: 12px;
    border-top: 1px solid var(--ink);
  }
  /* extension lines, from the scale's side of the line to just past it */
  .dim i::before, .dim i::after { content: ''; position: absolute; bottom: -9px; height: 20px; border-left: 1px solid var(--ink); }
  .dim i::before { left: 0; }
  .dim i::after { right: 0; }
  /* arrowheads, 12 by 6, centred on the line */
  .dim b { position: absolute; top: -3.5px; width: 0; height: 0; border-block: 3px solid transparent; }
  .dim b:first-child { left: 0; border-right: 12px solid var(--ink); }
  .dim b:last-child { right: 0; border-left: 12px solid var(--ink); }
  .dim .yrs {
    position: absolute;
    left: calc((var(--from) + var(--to)) / 2 / var(--span) * 100%);
    bottom: 16px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 1rem;
  }
  /* a dimension too short for its text: arrows outside pointing in, the text beside it */
  .short .dim i { left: calc(var(--from) / var(--span) * 100% - 26px); width: calc((var(--to) - var(--from)) / var(--span) * 100% + 52px); }
  .short .dim i::before { left: 26px; }
  .short .dim i::after { right: 26px; }
  .short .dim b:first-child { left: 14px; border-right: 0; border-left: 12px solid var(--ink); }
  .short .dim b:last-child { right: 14px; border-left: 0; border-right: 12px solid var(--ink); }
  .short .dim .yrs { left: calc(var(--to) / var(--span) * 100% + 34px); transform: none; bottom: 3px; }
  /* years that fit over their dimension in no form: beside it, the arrows still inside */
  .aside .dim .yrs { bottom: 3px; }
  /* The years stay where they are. Resting the pointer on the dimension (the .hit area the script lays over the
     line and its label) brings up a tooltip with the months after a moment; leaving it takes the tooltip away at
     once. The tooltip sits over the years with a small pointer to them, above everything including the pinned
     scale, and the script shifts it (--tshift) to keep it inside the column. */
  .dim { cursor: default; }
  .dim .hit { display: block; position: absolute; top: 0; bottom: 0; left: var(--hl, 0); width: var(--hw, 100%); }
  .yrs .y { display: inline; }
  .dim .yrs { padding-inline: 4px; margin-left: -4px; background: var(--paper); pointer-events: none; }   /* paper over the extension lines */
  .placed .dim .yrs { left: var(--yx); transform: none; }
  .measuring .dim .yrs { left: 0; transform: none; }
  .dim .yrs .m {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    display: grid;
    justify-items: center;
    row-gap: 1px;
    padding: 6px 12px 7px;
    border: 1px solid currentColor;
    background: var(--paper);
    font-size: 0.875rem;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    transform: translate(calc(-50% + var(--tshift, 0px)), 4px);
    transition: opacity 0.1s ease-in, transform 0.1s ease-in;
    pointer-events: none;
  }
  .dim .yrs .md { display: block; font-size: 0.8125rem; font-style: normal; font-variant-numeric: lining-nums; }
  /* the pointer: an outlined triangle under the tooltip, aimed at the middle of the years */
  .dim .yrs .m::before, .dim .yrs .m::after {
    content: '';
    position: absolute;
    left: calc(50% - var(--tshift, 0px));
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 0;
    transform: translateX(-50%);
  }
  .dim .yrs .m::before { top: 100%; border-top-color: currentColor; }
  .dim .yrs .m::after { top: calc(100% - 1.5px); border-top-color: var(--paper); }
  .hit:hover + .yrs { z-index: 2; }   /* over the pinned scale while it is up; the labels still scroll under it */
  .hit:hover + .yrs .m {
    opacity: 1;
    transform: translate(calc(-50% + var(--tshift, 0px)), 0);
    transition: opacity 0.18s ease-out 0.3s, transform 0.18s ease-out 0.3s;
  }
  /* the current job is still being drawn: wet ink, and the far extension line is not closed */
  .open .dim i { border-top-color: var(--wet); }
  .open .dim i::before { border-left-color: var(--wet); }
  .open .dim i::after { border-left: 1px dashed var(--wet); }
  .open .dim b:first-child { border-right-color: var(--wet); }
  .open .dim b:last-child { border-left-color: var(--wet); }
}

@media screen and (min-width: 721px) and (hover: none) {
  .yrs .y, .dim .yrs .md, .dim .hit { display: none; }
  .dim .yrs .m { position: static; display: inline; padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; opacity: 1; transform: none; }
  .dim .yrs .m::before, .dim .yrs .m::after { display: none; }
  .placed .dim .yrs { left: var(--mx); }
}
@media (prefers-reduced-motion: reduce) {
  .dim .yrs .m, .hit:hover + .yrs .m { transform: translate(calc(-50% + var(--tshift, 0px)), 0); }
  .hit:hover + .yrs .m { transition: opacity 0s linear 0.3s; }
  .scale .wash, .scale .reading, .scale .tag { transition: none; }
}

/* From 1200px the headline's first line fills the column, however wide the column grows */
@media (min-width: 1200px) { :root { --fs-h1: calc(var(--wrap) / 12.1); } }

@media print {
  .sea, .sea-foot { display: none; }
  .hero { height: auto; padding-block: 24px; border: 0; }
  .hero h1 { text-shadow: none; }
  .work li, .projects li { break-inside: avoid; }
}