/* Neon yellow-green + deep purple */
@font-face { font-family: "Squada One"; src: url(fonts/squada-one.woff2) format("woff2"); font-display: block; }

:root {
  --bg: #aaff00;
  --fg: #4b0685;
  --radius: 11.2px;
  --line: 2px;
  --gutter: min(32px, 3vw);
  --pad: clamp(16px, 3vw, 32px);
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --display: "Squada One", "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
  color-scheme: light;
}
:root.dark { --bg: #4b0685; --fg: #aaff00; color-scheme: dark; }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 300 19.2px/1.5 var(--sans); background: var(--bg); color: var(--fg); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 19px; top: 19px; z-index: 10; padding: 7.68px 12.8px; background: var(--bg); border: 2px solid; border-radius: 4px; font-weight: 550; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- lettering ---------- */
.lt-block { display: grid; }
.ln { display: flex; height: 1em; width: 100%; line-height: 1; }
.pc { height: 1em; flex: none; overflow: visible; fill: var(--fg); }
.pc .pc-o { fill: none; stroke: var(--fg); }
.st { position: relative; height: 1em; }
.st > span { position: absolute; inset: 0; }
.st-o { transform: translate(.035em, .04em); }
.st i { position: absolute; display: block; background: var(--fg); }
.st-o i { background: transparent; border: max(1px, .013em) solid var(--fg); }
.dark .st-f i { box-shadow: none; }

/* doodles: page-coloured fills with a solid offset edge */
.doodle { width: 100%; height: auto; overflow: visible; filter: drop-shadow(3px 3px 0 var(--fg)); color: var(--fg); }
.it { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--fg); }
.it .lb { display: block; white-space: nowrap; font-weight: 400; line-height: 1.2; }
.it:hover .doodle, .it:focus-visible .doodle { transform: rotate(-4deg) scale(1.04); }
.doodle { transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .doodle, .avatar { transition: none; } }

/* ---------- home ---------- */
.hero {
  margin: var(--gutter);
  min-height: calc(100vh - 2 * var(--gutter));
  border: var(--line) solid var(--fg);
  border-radius: var(--radius);
  padding: 32px 9.5vw;
  display: grid;
  align-content: center;
  container-type: inline-size;
}
.hero h1 { margin: 0; font-size: 19.2px; font-weight: 300; position: relative; }
.hero .lt-block { gap: min(14.4px, 1.312cqw); }
.hero .l1 { font-size: min(136px, 100cqw / 7.0); }
.hero .l2 { font-size: min(80px, 100cqw / 12.6); }

.hnav { display: flex; position: relative; z-index: 1; }
.hnav .lb { font-size: max(10px, min(20.8px, 2.9cqw)); }
.hnav-top { align-items: flex-end; justify-content: flex-end; gap: min(32px, 3.4cqw); margin-bottom: max(-4px, -.43cqw); }
.hnav-top .it-about { margin-left: 13%; margin-right: auto; width: min(136px, 14.468cqw); }
.hnav-top .it-work { width: min(130px, 13.83cqw); }
.hnav-top .it-archive { width: min(98px, 10.426cqw); }
.hnav-top .it-thoughts { width: min(144px, 15.319cqw); }
.hnav-top .it-mode { width: min(77px, 8.191cqw); }
.hnav-top .doodle { flex: none; }
.hnav-top .it-about .doodle { margin-bottom: max(-20.3281px, -2.163cqw); }
.hnav-top .it-work .doodle { margin-bottom: max(-19.5px, -2.074cqw); }
.hnav-top .it-archive .doodle { margin-bottom: max(-20.4688px, -2.178cqw); }
.hnav-top .it-thoughts .doodle { margin-bottom: max(-21.6562px, -2.304cqw); }
.hnav-top .it-mode .doodle { margin-bottom: max(-15.3125px, -1.629cqw); }
.hnav-top .it-about .doodle { width: min(148px, 15.745cqw); }
.hnav-top .it-work .doodle { width: min(141px, 15.0cqw); }
.hnav-top .it-archive .doodle { width: min(111px, 11.809cqw); }
.hnav-top .it-thoughts .doodle { width: min(150px, 15.957cqw); }
.hnav-top .it-mode .doodle { width: min(86px, 9.149cqw); }
.hnav-top .lb { margin-bottom: min(4px, .4cqw); }
.it-about .lb { align-self: flex-end; transform: rotate(6deg); margin-right: 2%; }
.it-work .lb { align-self: flex-start; transform: rotate(-10deg); margin-left: 4%; }
.it-archive .lb { align-self: flex-end; transform: rotate(7deg); margin-right: -6%; }
.it-thoughts .lb { transform: rotate(4deg); margin-left: 30%; }
.it-mode .lb { transform: rotate(-3deg); margin-left: 30%; }

.hnav-bottom { justify-content: space-between; align-items: flex-start; margin-top: 0; }
.it-email { margin-left: 13.8%; margin-top: min(31px, 3.3cqw); width: min(108px, 11.5cqw); }
.it-email .lb { transform: rotate(8deg); margin-top: min(6px, .6cqw); }
.powered { display: flex; align-items: flex-start; margin-right: min(16px, 1.7cqw); }
.powered p { margin: min(29px, 3cqw) 0 0; font-size: clamp(7.5px, calc(.78vw + 5px), 14.4px); line-height: 1.25; font-weight: 300; }
.powered em { font-style: italic; }
/* tucked up against the title as originally, but drawn in front of it */
.coffee { position: relative; z-index: 3; display: block; width: min(92px, 9.8cqw); margin-top: max(-17px, -1.8cqw); }

/* the cup draws its own shadow (see icons.mjs) so the steam isn't shadowed */
.doodle-flat { filter: none; }

/* Coffee steam: flowing ribbons. Each line shows a short stretch (the dash) that slides from
   the cup to the top of the curve and fades out as it goes. As it rises, the whole wisp leans
   off to one side (--lean, --drift), so the steam disperses; site.js picks a new random angle
   for each wisp every time it starts again. On hover the ribbons get longer (same speed). */
@property --s { syntax: '<number>'; inherits: false; initial-value: 0; }
.coffee .steam {
  --flow: 4.4s; --ribbon: 52; --lean: 0deg; --drift: 0px;
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: translateX(calc(var(--drift) * var(--s))) rotate(calc(var(--lean) * var(--s)));
  animation: steam-sway var(--flow) cubic-bezier(.5, 0, .75, 1) infinite;
}
/* each taper layer is --part of the ribbon long and lines up with the ribbon's top end;
   --t runs 0 → 1 to carry the ribbon from the cup to past the top of the curve */
@property --t { syntax: '<number>'; inherits: false; initial-value: 0; }
.coffee .steam path {
  --len: calc(var(--ribbon) * var(--part));
  stroke-dasharray: var(--len) 300;
  stroke-dashoffset: calc(var(--len) - var(--t) * (100 + var(--ribbon)));
  animation: steam-flow var(--flow) cubic-bezier(.35, .1, .6, 1) infinite;
}
.coffee .steam:nth-of-type(2), .coffee .steam:nth-of-type(2) path { animation-delay: calc(var(--flow) / -3); }
.coffee .steam:nth-of-type(3), .coffee .steam:nth-of-type(3) path { animation-delay: calc(var(--flow) / -1.5); }
.coffee:hover .steam, .coffee:focus-visible .steam { --ribbon: 66; }
@keyframes steam-flow { from { --t: 0; } to { --t: 1; } }
@keyframes steam-sway {
  0% { --s: 0; opacity: 0; }
  12% { opacity: .85; }
  70% { opacity: .55; }
  100% { --s: 1; opacity: 0; }
}

/* on hover the cup lifts, straightens and is set down on the table with a little bump;
   it stays upright while hovered and eases back to its tilt afterwards */
.coffee .doodle { transform-origin: 50% 100%; transition: transform .45s ease; }
.coffee:hover .doodle, .coffee:focus-visible .doodle { transform: rotate(-7deg); animation: cup-place .75s ease-out; }
@keyframes cup-place {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-7px) rotate(-4deg); }
  62% { transform: translateY(0) rotate(-7deg) scale(1.04, .94); }
  80% { transform: translateY(-2px) rotate(-7deg) scale(.99, 1.02); }
  100% { transform: translateY(0) rotate(-7deg) scale(1); }
}

/* Mode switch: the knob flicks down for dark, with a little bounce */
.it-mode .knob { transition: transform .38s cubic-bezier(.3, 1.7, .55, 1); }
:root.dark .it-mode .knob { transform: translateY(21px); }
.it-mode.clicked .doodle { animation: click-bounce .32s ease-out; }
@keyframes click-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(.92, .95) rotate(2deg); }
  70% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* Paper plane flight: a copy of the plane loops off the page leaving fading dots */
.flight { position: fixed; inset: 0; pointer-events: none; z-index: 50; color: var(--fg); }
.flight svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flight .dot { fill: currentColor; stroke: var(--bg); stroke-width: 1.5; paint-order: stroke; animation: dot-fade 1.8s ease-out forwards; }
@keyframes dot-fade { from { opacity: .9; } to { opacity: 0; } }
.flight .flyer { position: absolute; left: 0; top: 0; will-change: transform; }
.it-email .plane { transition: transform .2s ease, opacity .6s ease; }
.it-email.flying .plane { opacity: 0; transition: none; }

/* ---------- inner pages ---------- */
.frame { margin: var(--gutter); }
/* the frame's outline is carried by its three parts, like the original */
.top { border: var(--line) solid var(--fg); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.frame > main { border-left: var(--line) solid var(--fg); border-right: var(--line) solid var(--fg); }
.bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 110px; padding: 0 var(--pad);
  border-bottom: var(--line) solid var(--fg);
  position: relative; z-index: 2;
}
.logo { display: block; width: 25vw; max-width: 200px; text-decoration: none; }
.logo .ln { font-size: calc(min(200px, 25vw) / 8.5); }
.icons { display: flex; align-self: flex-start; gap: clamp(8px, 2vw, 16px); padding-top: min(18px, calc(3.96px + 1.476vw)); }
.icons .it .lb { font-size: min(17.6px, calc(.74vw + 9px)); margin-top: -3px; }
.icons .it .lb { order: 2; }
.icons a.it { margin-bottom: -24px; }
.icons .it-about { width: min(119px, calc(26.2px + 9.76vw)); margin-top: min(13px, calc(2.86px + 1.07vw)); }
.icons .it-work { width: min(108px, calc(23.8px + 8.86vw)); margin-top: min(2px, calc(.44px + .16vw)); }
.icons .it-archive { width: min(85px, calc(18.7px + 6.97vw)); }
.icons .it-thoughts { width: min(109px, calc(24px + 8.94vw)); margin-top: min(18px, calc(3.96px + 1.476vw)); }
.icons .it-mode { width: min(60px, calc(13.2px + 4.92vw)); margin-top: min(19px, calc(4.18px + 1.56vw)); }
.icons .it-about .lb { transform: rotate(-2deg); margin-left: 30%; }
.icons .it-work .lb { transform: rotate(5deg); align-self: center; margin-left: 0; }
.icons .it-archive .lb { transform: rotate(-2deg); align-self: center; margin-right: 0; }
.icons .it-thoughts .lb { margin-left: 0; margin-top: 4px; }
.icons .it-mode .lb { margin-left: 0; margin-top: 6px; }

.title { margin: 0; display: flex; justify-content: center; padding: clamp(48px, 10vw, 96px) 16px; border-bottom: var(--line) solid var(--fg); font-size: 19.2px; font-weight: 300; }
.title .lt-block { width: max-content; gap: min(16px, 2vw); }
.title .l1 { font-size: min(140px, 14.6vw); }
.title .l2 { font-size: min(40px, 3.2vw); }
.about .title .l1 { font-size: min(140px, 15.6vw); }
.about .title .l2 { font-size: min(40px, 3.4vw); }
.superb .title .l1 { font-size: min(140px, 15.6vw); }
.superb .title .l2 { font-size: min(40px, 3.4vw); }
.shop .title .l1 { font-size: min(140px, 15.6vw); }
.shop .title .l2 { font-size: min(40px, 3.4vw); }
/* second line sized to almost match ARCHIVE's width, so only a little of it stretches */
.archive .title .l2 { font-size: min(54px, 5.7vw); }
@media (min-width: 1024px) {
  .about .title .lt-block { width: min(735px, 51vw); }
  .work .title .lt-block { width: min(649px, 45vw); }
  .archive .title .lt-block { width: min(735px, 51vw); }
  .superb .title .lt-block { width: min(735px, 51vw); }
  .shop .title .lt-block { width: min(735px, 51vw); }
}

/* superb placeholder */
.soon { max-width: 560px; margin: 0 auto; padding: min(64px, 10vw) 16px; text-align: center; }
.soon p { margin: 0 0 1.5em; }
.soon-btn { display: inline-block; padding: 12px 28px; border: var(--line) solid var(--fg); border-radius: var(--radius); font-weight: 550; text-decoration: none; box-shadow: 3px 3px 0 var(--fg); transition: transform .15s ease, box-shadow .15s ease; }
.soon-btn:hover, .soon-btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--fg); }
.soon-badge { display: block; width: min(100%, 420px); height: auto; margin: 0 auto 1.5em; }
/* shop: the badge printed in ink, with a tilted coming-soon stamp */
.shop-art { position: relative; width: min(100%, 420px); margin: 0 auto 1.5em; }
.shop-art img { display: block; width: 100%; height: auto; border-radius: 50%; mix-blend-mode: multiply; }
.dark .shop-art img { mix-blend-mode: normal; background: #fff; }
.shop-stamp { position: absolute; right: -4%; bottom: 10%; transform: rotate(-12deg); padding: 6px 16px; border: 3px solid var(--fg); border-radius: 8px; background: var(--bg); font-family: var(--display, inherit); font-weight: 700; font-size: clamp(16px, 4vw, 24px); letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--fg); }
/* home: the stacked phone version of the name stays hidden on bigger screens */
.hero .lt-phone { display: none; }

/* about */
.main-about { display: grid; grid-template-columns: min(630px, calc(100% - 2 * (16vw - 43px))); justify-content: center; }
.bio { display: flow-root; margin-top: min(64px, 10vw); }
.main-about > ul:last-child { margin-bottom: min(64px, 10vw); }
/* the Superb hook at the bottom of the About page */
.about-superb { display: grid; grid-template-columns: min(200px, 32%) 1fr; gap: 32px; align-items: center; margin: 24px 0 min(64px, 10vw); padding-top: 40px; border-top: var(--line) dotted var(--fg); }
.about-superb-badge img { display: block; width: 100%; height: auto; transition: transform .2s ease; }
.about-superb-badge:hover img { transform: rotate(-6deg) scale(1.04); }
.main-about .about-superb h2 { margin: 0 0 12px; }
.about-superb p { margin: 0 0 1.2em; }
.main-about .about-superb .soon-btn { text-decoration: none; }
@media (max-width: 600px) {
  .about-superb { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
  .about-superb-badge { width: min(220px, 70%); }
}
.bio > p:last-child { margin-bottom: 0; }
.main-about p { margin: 0 0 1.49902em; }
.main-about a { font-weight: 550; text-underline-offset: 2px; text-decoration-thickness: 2px; }
.avatar { display: block; float: left; width: min(189px, 30%); aspect-ratio: 1; margin: 2px 32px 16px 0; padding: 0; border: var(--line) solid var(--fg); border-radius: var(--radius); overflow: hidden; background: none; cursor: zoom-in; transition: width .35s ease; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; vertical-align: top; }
.avatar.big { width: min(378px, 60%); cursor: zoom-out; }   /* click the photo: twice the size, still square */
.avatar:focus-visible { outline: var(--line) solid var(--fg); outline-offset: 4px; }
blockquote { clear: both; position: relative; margin: 0 0 1.5em; padding: .7em 1em .7em 32px; border: var(--line) dotted var(--fg); border-radius: var(--radius); }
blockquote::before { content: "“"; position: absolute; left: -15px; top: 12px; width: 28px; height: 28px; border: var(--line) solid var(--fg); border-radius: 50%; background: var(--bg); font: 700 22px/34px Georgia, serif; text-align: center; }
blockquote p { margin: 0 !important; }
cite { display: block; text-align: right; font-style: normal; font-size: 16px; margin-top: 6px; }
.cup { display: inline-block; width: 16px; height: 22px; vertical-align: -3px; margin: 0 2px; }
.main-about h2 {
  position: relative; margin: 56px 0 29px; font: 400 56px/1 var(--display);
  color: var(--bg); -webkit-text-stroke: 1.2px var(--fg); text-shadow: 3px 3px 0 var(--fg);
}
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: var(--line) dotted var(--fg); font-size: 16px; line-height: 1.6; }
.rows li:last-child { border-bottom: 0; }
.rows a { font-weight: 550; text-decoration: none; max-width: 534px; }
.rows a:hover { text-decoration: underline; }
.rows .yr { font-weight: 400; flex: none; padding-left: 4.8px; }
.talks li { line-height: 1.45; }
.venue { font-weight: 400; }

/* work */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.grid li { padding: 11.2px 11.2px 0; border-right: var(--line) dotted var(--fg); border-bottom: var(--line) dotted var(--fg); min-width: 0; }
.grid li:nth-child(3n) { border-right: 0; }
.grid li:nth-last-child(-n + 3) { border-bottom: 0; }
/* archive rows can end part-way, so only the true last row drops its bottom line */
.archive .grid li:nth-last-child(-n + 3) { border-bottom: var(--line) dotted var(--fg); }
.archive .grid li:nth-child(3n + 1):nth-last-child(-n + 3), .archive .grid li:nth-child(3n + 1):nth-last-child(-n + 3) ~ li { border-bottom: 0; }
.thumb { display: block; max-width: 428px; border: var(--line) solid var(--fg); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease; }
.thumb img { display: block; width: 100%; height: auto; aspect-ratio: 424 / 258; object-fit: cover; }
.thumb:hover { transform: rotate(-1deg); }

/* Work tiles flicker like a film projector on hover */
.thumb { position: relative; }
.thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, #0000001f 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 50%, #00000059);
}
.thumb:hover::after, .thumb:focus-visible::after { animation: projector-veil .5s steps(1) infinite; }
.thumb:hover img, .thumb:focus-visible img { animation: projector .45s steps(1) infinite; }
@keyframes projector {
  0% { filter: brightness(1.06) contrast(1.05); transform: translateY(0); }
  20% { filter: brightness(.86) contrast(1.1); transform: translateY(1px); }
  40% { filter: brightness(1.14) sepia(.12); transform: translateY(0); }
  60% { filter: brightness(.93); transform: translateY(-1px); }
  80% { filter: brightness(1.08) sepia(.06); transform: translateY(0); }
}
@keyframes projector-veil { 0% { opacity: .7; } 25% { opacity: 1; } 50% { opacity: .55; } 75% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .coffee .steam, .coffee .steam path, .coffee .doodle, .it-mode.clicked .doodle, .thumb::after, .thumb img { animation: none !important; }
  .coffee .steam path { --t: .5; }
  .coffee .steam { opacity: .75; }
  .it-mode .knob { transition: none; }
}
.cap { display: flex; justify-content: space-between; align-items: center; padding: 19.2px 4.8px; font-size: 16px; line-height: 18.4px; font-weight: 550; }
.cap a { text-decoration: none; }
.cap a:hover { text-decoration: underline; }
.cap .yr { flex: 0 1 auto; max-width: 42%; padding-left: 16px; text-align: right; font-weight: 400; }   /* tutorials: the channel name, kept clear of the title */
.pen svg { width: 21px; height: 21px; }

/* footer */
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 13px; padding: var(--pad); border: var(--line) solid var(--fg); border-radius: 0 0 var(--radius) var(--radius); font-size: 13.28px; line-height: 1.5; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 13.28px; text-transform: uppercase; }
.foot a { font-weight: 550; text-decoration: none; }
.foot-links a { line-height: 27px; }
.arch { margin: 0; padding-top: 3.984px; font-weight: 300; line-height: 16px; }
.foot-icons { display: flex; gap: 13px; }
.foot-icons svg { width: 27px; height: 27px; }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .bar { height: 103px; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero h1, .title { font-size: 16px; }
  /* home: name stacked on two big lines, tagline on two lines */
  .hero { padding: 32px 20px; }
  .hero .lt-wide { display: none; }
  .hero .lt-phone { display: grid; gap: 2.5cqw; }
  .hero .p1 { font-size: calc(100cqw / 4.5); }
  .hero .p2 { font-size: calc(100cqw / 7.4); }
  .bar { height: 108px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
  .icons { padding-top: 0; align-self: center; }
  .grid { grid-template-columns: 1fr; }
  .thumb { max-width: none; aspect-ratio: 1.659; }
  .thumb img { height: 100%; aspect-ratio: auto; }
  .grid li { border-right: 0 !important; border-bottom: var(--line) dotted var(--fg) !important; }
  .grid li:last-child { border-bottom: 0 !important; }
  .avatar { margin-right: 24px; }
  .main-about h2 { font-size: 56px; }
  .rows li { font-size: 14px; line-height: 1.4; }
  .talks li { line-height: 1.5; }
  .rows a { max-width: none; }
  .foot { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .foot-l { display: contents; }
  .foot-links { order: 1; justify-content: center; }
  .foot-links a { line-height: 20px; }
  .foot-icons { order: 2; }
  .arch { order: 3; margin: 0; }
}

/* label spacing on the first three doodles, as measured on the original */
.hnav-top .it-about .lb, .hnav-top .it-work .lb, .hnav-top .it-archive .lb { margin-bottom: min(10.4px, 1.106cqw); }
.hnav-top .it-about .doodle, .hnav-top .it-work .doodle, .hnav-top .it-archive .doodle { margin-top: max(-6.4px, -.681cqw); }

/* tablet: the original's project pictures sit a touch flatter */
@media (min-width: 601px) and (max-width: 1023px) {
  .thumb img { aspect-ratio: 1.662; }
}