/* shankark.tech
   Direction: the lid of a laptop in an orange hard-shell case, covered in
   project stickers. Tokens and the reasons for them: design/DIRECTION.md. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched so the swap from the fallback does not reflow the page. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
  size-adjust: 91.45%;
  ascent-override: 101.69%;
  descent-override: 29.52%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* The object */
  --lid: oklch(71% 0.16 52);
  --lid-ink: oklch(18% 0.018 50);
  --tape: oklch(17% 0.012 50);
  --tape-ink: oklch(97% 0.004 80);
  --vinyl: oklch(98.5% 0.004 80);
  --kraft: oklch(78% 0.06 75);
  --shadow: 70 30 0;

  /* The page under the case */
  --ground: oklch(97% 0.003 250);
  --ink: oklch(18% 0.018 50);
  --ink-2: oklch(42% 0.015 50);
  --rule: oklch(18% 0.018 50 / 0.14);
  --accent-text: oklch(49% 0.15 45);
  --focus: var(--ink);

  /* Type */
  --font: "Bricolage Grotesque", "Bricolage Fallback", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  /* also capped by height, so short laptop screens keep the action in view */
  --t-label: min(clamp(2rem, 0.4rem + 10.4vw, 7.25rem), 15svh);
  --t-h2: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --t-h3: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-body: 1.125rem;
  --t-small: 0.9375rem;
  --t-meta: 0.8125rem;

  /* Space: 8px unit */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
  --s12: 96px; --s16: 128px; --s22: 176px;
  --gutter: 24px;
  --margin: clamp(20px, 5vw, 96px);
  --max: 1440px;
  /* the page edge: the margin, or wider once the screen passes --max, so every section shares one left line */
  --edge: max(var(--margin), calc((100vw - var(--max)) / 2));

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lid: oklch(66% 0.15 50);
    --ground: oklch(20% 0.008 50);
    --ink: oklch(94% 0.006 80);
    --ink-2: oklch(74% 0.01 60);
    --rule: oklch(94% 0.006 80 / 0.16);
    --accent-text: oklch(77% 0.14 55);
    --shadow: 0 0 0;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--lid);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--ground);
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 150ms var(--ease-press);
}
@media (hover: hover) {
  a:hover { text-decoration-thickness: 0.16em; }
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--margin); top: 8px; z-index: 100;
  padding: 10px 14px; background: var(--tape); color: var(--tape-ink);
  font-weight: 600; text-decoration: none;
  transform: translateY(-150%);
}
.skip:focus { transform: none; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  font-weight: 420;
  text-wrap: pretty;
  max-width: 34ch;
}

p { text-wrap: pretty; }

/* GitHub and App Store marks in front of a link, in the link's own ink.
   Inline, so the link keeps the text's baseline mid-sentence; nowrap keeps the mark with its words. */
.icon-link { white-space: nowrap; }
.icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.17em;
  margin-right: 0.4em;
  fill: currentColor;
}
.sprite { position: absolute; }

/* ------------------------------------------------------------------ */
/* Label tape: the name, the buttons, "Say hi".                        */

.tape {
  display: inline-block;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.07), transparent 40%, rgb(0 0 0 / 0.12)),
    var(--tape);
  color: var(--tape-ink);
  font-weight: 800;
  font-stretch: 75%;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1;
  padding: 0.15em 0.36em 0.08em;
  border-radius: 0.045em;
  border: 1px solid transparent;
  /* embossed: the letters are pressed up out of the tape */
  text-shadow:
    0 0.025em 0 rgb(255 255 255 / 0.3),
    0 -0.015em 0 rgb(0 0 0 / 0.75);
  box-shadow:
    0 0.02em 0 rgb(0 0 0 / 0.25),
    0 0.14em 0.22em -0.1em rgb(var(--shadow) / 0.5);
}

/* ------------------------------------------------------------------ */
/* The lid                                                             */

.lid {
  --ink: var(--lid-ink);
  --ink-2: oklch(26% 0.03 50);
  --focus: var(--lid-ink);
  position: relative;
  color: var(--lid-ink);
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0.13), transparent 36% 64%, rgb(0 0 0 / 0.06)),
    var(--lid);
  padding-inline: var(--edge);
}

.site-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  padding: var(--s2) var(--edge) 0;
  color: var(--lid-ink);
  --focus: var(--lid-ink);
  pointer-events: none;
}

.lid--top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(var(--s4), 1fr) auto;
  column-gap: var(--gutter);
  min-height: 100svh;
  max-height: 1100px;
  padding-block: clamp(var(--s8), 11svh, var(--s12)) clamp(var(--s4), 7vh, var(--s8));
  overflow: clip;
}

.topnav {
  display: flex;
  gap: var(--s3);
  font-size: var(--t-small);
  font-weight: 600;
  pointer-events: auto;
}
.topnav a {
  text-decoration: none;
  padding: 10px 0;
}
.topnav a:hover { text-decoration: underline; text-decoration-thickness: 0.12em; }

.name {
  grid-column: 1 / 9;
  grid-row: 1;
  align-self: start;
  margin-top: clamp(0px, 4vh, var(--s6));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--t-label);
  position: relative;
  z-index: 3;
}
.name .tape { font-size: 1em; }
.tape--a { rotate: -2.2deg; transform-origin: 0 100%; }
.tape--b { rotate: -0.6deg; margin: 0.1em 0 0 clamp(0.12em, 4vw - 0.6em, 0.42em); }

.intro {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: end;
  position: relative;
  z-index: 3;
}
.intro .lead { max-width: 30ch; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
}

.tape--btn {
  font-size: 1.25rem;
  padding: 0.62em 0.85em 0.54em;
  text-decoration: none;
  rotate: -1.2deg;
  transition: rotate 160ms var(--ease-press), translate 160ms var(--ease-press);
}
@media (hover: hover) {
  .tape--btn:hover { rotate: 0deg; translate: 0 -1px; text-decoration: none; }
}
.tape--btn:active { translate: 0 1px; }

.textlink {
  font-weight: 650;
  padding-block: 10px;
}

/* ------------------------------------------------------------------ */
/* Stickers. Sized in em so one font-size scales a whole sticker.      */

.board {
  grid-column: 8 / 13;
  grid-row: 1 / 4;
  position: relative;
  font-size: clamp(12px, 0.55rem + 0.55vw, 16px);
  min-height: 0;
  /* above the tape and the intro: a sticker moved onto them sits on top, as it would */
  z-index: 4;
}

.stk {
  position: absolute;
  left: var(--x);
  top: var(--y);
  rotate: calc(var(--r, 0deg) + var(--lean, 0deg));
  color: var(--lid-ink);
  text-decoration: none;
  line-height: 1.05;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  transition: scale 160ms var(--ease-press), rotate 240ms var(--ease-out);
}
.stk:focus-visible { outline-offset: 8px; border-radius: 12px; }

/* the die-cut: white vinyl border, a sticker sits 0.1mm proud of the lid */
.stk > span:first-child {
  display: grid;
  box-shadow:
    0 0 0 0.25em var(--vinyl),
    0 0.08em 0.12em 0.2em rgb(var(--shadow) / 0.22),
    0 0.5em 0.9em -0.2em rgb(var(--shadow) / 0.42);
  transition: box-shadow 160ms var(--ease-press);
}
.stk > svg {
  overflow: visible;
  filter:
    drop-shadow(0 0.08em 0.1em rgb(var(--shadow) / 0.28))
    drop-shadow(0 0.4em 0.5em rgb(var(--shadow) / 0.3));
}

@media (hover: hover) and (pointer: fine) {
  [data-board] .stk { cursor: grab; }
  [data-board] .stk:hover { scale: 1.03; }
}
.stk.is-up {
  cursor: grabbing;
  scale: 1.06;
  z-index: 50;
  transition: scale 160ms var(--ease-press);
}
.stk.is-up > span:first-child {
  box-shadow:
    0 0 0 0.25em var(--vinyl),
    0 1.4em 1.8em -0.6em rgb(var(--shadow) / 0.5);
}

/* positions on the lid (percent of the board) */
.board .stk--space  { --x: 4%;  --y: 0%;  --r: -6deg; }
.board .stk--ganga  { --x: 58%; --y: 5%;  --r: 7deg; }
.board .stk--bridge { --x: 33%; --y: 37%; --r: 3deg; }
.board .stk--mind   { --x: 72%; --y: 50%; --r: -10deg; }
.board .stk--patch  { --x: 3%;  --y: 72%; --r: -4deg; }
.board .stk--star   { --x: 40%; --y: 68%; --r: 12deg; }
.board .stk--class  { --x: 76%; --y: 81%; --r: 0deg; }

/* Stevenson Space: the app icon, live */
.space {
  width: 11em;
  height: 11em;
  border-radius: 2.6em;
  background: var(--tape);
  color: var(--tape-ink);
  padding: 1.15em 1.2em 1.25em;
  grid-template-rows: auto 1fr auto auto;
}
.space__top { font-size: max(11px, 0.875em); font-weight: 600; opacity: 0.8; }
.space__big {
  align-self: end;
  font-size: 4.1em;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.space__low { font-size: max(11px, 0.9375em); font-weight: 450; margin-top: 0.35em; }
/* Points at the footnote on the big sticker's panel: standard schedule only. In CSS, so the bell's
   text updates keep it; out of flow, so it hangs after the last word and never forces a wrap. */
[data-bell-low]::after { content: "*"; position: absolute; }
.space__bar {
  display: block;
  height: 0.375em;
  margin-top: 0.7em;
  border-radius: 1em;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
}
.space__bar > span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0.5) * 100%);
  background: var(--lid);
  border-radius: inherit;
}

/* Rejuvenate Ganga: kraft circle, a river */
.ganga {
  width: 10.75em;
  height: 10.75em;
  border-radius: 50%;
  background: var(--kraft);
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.35em;
}
.ganga svg { width: 6.6em; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.ganga__name {
  font-size: 1.25em;
  font-weight: 800;
  font-stretch: 78%;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.ganga__role { font-size: max(11px, 0.8125em); font-weight: 550; }

/* Bridge AIDE: white vinyl, a truss */
.bridge {
  width: 14em;
  background: var(--vinyl);
  border-radius: 0.75em;
  padding: 1em 1.2em 1.05em;
  gap: 0.15em;
}
.bridge svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; margin-bottom: 0.55em; }
.bridge__name { font-size: 1.375em; font-weight: 750; letter-spacing: -0.01em; }
.bridge__role { font-size: max(11px, 0.875em); font-weight: 450; }

/* MindPath: holographic, a fingerprint */
.mind {
  width: 9.5em;
  height: 9.5em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.7), transparent 45%),
    conic-gradient(from 40deg, oklch(89% 0.08 200), oklch(91% 0.09 320), oklch(93% 0.09 95), oklch(89% 0.08 160), oklch(89% 0.08 200));
  place-content: center;
  justify-items: center;
  text-align: center;
}
.mind svg {
  width: 4.2em; height: 4.2em; margin-bottom: 0.35em;
  stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; opacity: 0.8;
}
.mind__name { font-size: 1.25em; font-weight: 800; letter-spacing: -0.01em; }
.mind__tag { font-size: max(11px, 0.75em); font-weight: 650; margin-top: 0.15em; }

/* Code Ninjas: an embroidered patch */
.patch {
  background: var(--tape);
  color: var(--tape-ink);
  border-radius: 0.6em;
  padding: 0.95em 1.4em 1em;
  outline: 0.13em dashed rgb(255 255 255 / 0.55);
  outline-offset: -0.5em;
  text-align: center;
}
.patch__name {
  font-size: 1.6em;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.patch__org { font-size: max(11px, 0.8125em); font-weight: 500; opacity: 0.85; margin-top: 0.2em; }

/* Trends Finder: a foil star */
.star { width: 10em; height: auto; }
.star__cut { fill: var(--vinyl); stroke: var(--vinyl); stroke-width: 9; stroke-linejoin: round; }
.star__foil { stroke: rgb(0 0 0 / 0.08); stroke-width: 1; stroke-linejoin: round; }
.star__num { font-family: var(--font); font-size: 36px; font-weight: 800; font-stretch: 85%; fill: var(--lid-ink); letter-spacing: -1px; }
.star__cap { font-family: var(--font); font-size: 16px; font-weight: 650; fill: var(--lid-ink); }

/* Class of 2027: a round stamp */
.stamp { width: 8.25em; height: auto; }
.stamp circle { fill: var(--vinyl); }
.stamp__ring {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--accent-text-on-vinyl, oklch(49% 0.15 45));
}
.stamp__year { font-family: var(--font); font-size: 44px; font-weight: 800; font-stretch: 80%; fill: var(--lid-ink); letter-spacing: -1px; }

/* Dynamic Dragon: a speech bubble */
.dragon {
  position: relative;
  background: var(--tape);
  color: var(--tape-ink);
  border-radius: 1.1em;
  padding: 1em 1.3em 1.05em;
  width: 11.5em;
}
.dragon::after {
  content: "";
  position: absolute;
  left: 1.6em;
  bottom: -0.95em;
  border: 0.55em solid transparent;
  border-top: 0.7em solid var(--tape);
  border-left-width: 0.15em;
}
.dragon__q { font-size: 1.5em; font-weight: 800; font-stretch: 80%; line-height: 1; letter-spacing: -0.01em; }
.dragon__name { display: block; font-size: max(11px, 0.8125em); font-weight: 500; margin-top: 0.6em; opacity: 0.85; }

/* The entrance: each sticker is held over the lid, then pressed flat */
@keyframes apply {
  from { transform: translateY(-1.4em) rotate(7deg) scale(1.14); }
  to { transform: none; }
}
@keyframes apply-shadow {
  from {
    box-shadow:
      0 0 0 0.25em var(--vinyl),
      0 2.2em 2.4em -0.8em rgb(var(--shadow) / 0.45);
  }
}
.board.is-applying .stk {
  animation: apply 760ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.board.is-applying .stk > span:first-child {
  animation: apply-shadow 760ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* ------------------------------------------------------------------ */
/* Stevenson Space, the feature                                        */

main { background: var(--ground); }

.feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--edge);
}

/* the one break: a piece of the lid runs off the left edge */
.feature__lid {
  position: relative;
  grid-column: 1 / 6;
  margin-left: calc(-1 * var(--edge));
  --focus: var(--lid-ink);
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0.13), transparent 40% 70%, rgb(0 0 0 / 0.06)),
    var(--lid);
  color: var(--lid-ink);
  padding: var(--s22) var(--s4) var(--s16);
}
.feature__fig {
  position: sticky;
  top: max(var(--s8), calc(50svh - 16rem));
  display: grid;
  justify-items: center;
  gap: var(--s6);
}
.stk--big {
  position: relative;
  font-size: clamp(18px, 0.4rem + 1.5vw, 28px);
  rotate: -4deg;
  transition: none;
}
.feature__lid figcaption {
  position: absolute;
  inset: auto var(--s3) var(--s3);
  font-size: var(--t-meta);
  line-height: 1.45;
  text-align: left;
}

.feature__text {
  grid-column: 7 / 13;
  padding-block: var(--s22) var(--s16);
  max-width: 38rem;
}
.kicker {
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--accent-text);
  margin-bottom: var(--s2);
}
h2 {
  font-size: var(--t-h2);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.feature__text h2 { margin-bottom: var(--s4); }
.feature__text .lead { max-width: 30ch; margin-bottom: var(--s3); }
.feature__text > p:not(.lead):not(.kicker):not(.fine):not(.links) { max-width: 60ch; color: var(--ink); }

.ticks {
  list-style: none;
  padding: 0;
  margin: var(--s6) 0;
  border-top: 1px solid var(--rule);
}
.ticks li {
  padding: var(--s2) 0 var(--s2) 1.6em;
  border-bottom: 1px solid var(--rule);
  position: relative;
  max-width: 60ch;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 1.35em;
  width: 0.7em;
  height: 0.35em;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  rotate: -45deg;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin-bottom: var(--s4);
}
.facts dt, .entry__facts dt {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-2);
}
.facts dd, .entry__facts dd {
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  font-weight: 600;
}
.links a { padding-block: 6px; }
.links__note { font-weight: 450; }
.links__note a { font-weight: 600; }

.fine {
  margin-top: var(--s4);
  font-size: var(--t-meta);
  color: var(--ink-2);
  max-width: 48ch;
}

/* ------------------------------------------------------------------ */
/* The work                                                            */

.work {
  padding: var(--s16) var(--edge) var(--s12);
}
.work > h2 { max-width: 12ch; margin-bottom: var(--s8); }

.index {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.entry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  scroll-margin-top: var(--s3);
}
.entry__art {
  grid-column: 1 / 4;
  min-height: 9.5rem;
  display: grid;
  place-items: center start;
  font-size: 13.5px;
  padding-left: 0.5em;
}
.entry__art .stk { position: relative; }
.entry:nth-child(odd) .entry__art .stk { rotate: -3deg; }
.entry:nth-child(even) .entry__art .stk { rotate: 4deg; }
.entry__body { grid-column: 4 / 9; }
.entry__body h3 {
  font-size: var(--t-h3);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s2);
}
.entry__body p { max-width: 54ch; }
.entry__facts {
  grid-column: 10 / 13;
  display: grid;
  gap: var(--s2);
  padding-top: 0.5rem;
}
.entry__links dd { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.entry__links a { padding-block: 4px; }

.also {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--s12);
}
.also h3 {
  grid-column: 1 / 4;
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.also ul {
  grid-column: 4 / 13;
  list-style: none;
  padding: 0;
  columns: 2;
  column-gap: var(--gutter);
}
.also li {
  break-inside: avoid;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.also li a { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ */
/* About                                                               */

.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s16) var(--edge) var(--s22);
  align-items: start;
}
.about__photo { grid-column: 1 / 5; }
.about__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__photo figcaption {
  font-size: var(--t-meta);
  color: var(--ink-2);
  margin-top: var(--s1);
}
.about__text { grid-column: 6 / 12; padding-top: var(--s4); }
.about__text h2 { margin-bottom: var(--s4); }
.about__text .lead { max-width: 32ch; margin-bottom: var(--s3); }
.about__text > p:not(.lead) { max-width: 58ch; }

.roles { margin-top: var(--s8); border-top: 1px solid var(--rule); }
.roles > div {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: var(--s1) var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
}
.roles dt { font-weight: 650; }
.roles dd { color: var(--ink-2); }
.roles__when { font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------------------ */
/* The lid again                                                       */

.lid--end {
  overflow: clip;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-block: var(--s16) var(--s6);
  align-items: start;
}
.lid--end > * { grid-column: 1 / 9; justify-self: start; }
.tape--say {
  font-size: var(--t-label);
  rotate: -1.6deg;
  margin-bottom: var(--s6);
}
.mail {
  font-size: clamp(1.5rem, 0.55rem + 3.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mail a { text-decoration-thickness: 0.06em; text-underline-offset: 0.14em; }
.end__line { margin-top: var(--s4); max-width: 46ch; font-size: var(--t-body); }
.lid--end > .end__stickers {
  grid-column: 9 / 13;
  grid-row: 1 / 4;
  justify-self: stretch;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s4) var(--s6);
  font-size: clamp(13px, 0.5rem + 0.75vw, 18px);
  padding: var(--s4) 0;
}
.end__stickers { position: relative; z-index: 2; }
.end__stickers .stk { position: relative; }
.stk--gh { --r: 4deg; }
.stk--yt { --r: -8deg; }
.gh {
  width: 12.5em;
  background: var(--vinyl);
  border-radius: 0.75em;
  padding: 1.1em 1.2em 1.05em;
}
.gh svg { width: 100%; margin-bottom: 0.7em; }
.gh__cells { fill: var(--lid-ink); }
.gh__name { font-size: 1.375em; font-weight: 750; letter-spacing: -0.01em; }
.gh__user { font-size: max(11px, 0.875em); font-weight: 450; }
.yt {
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background: var(--tape);
  color: var(--tape-ink);
  place-content: center;
  justify-items: center;
  gap: 0.35em;
}
.yt svg { width: 2.8em; fill: var(--lid); margin-left: 0.25em; }
.yt__name { font-size: max(11px, 0.9375em); font-weight: 700; }
.colophon { margin-top: var(--s16); font-size: var(--t-meta); font-weight: 500; }
.lid--end > .colophon { grid-column: 1 / -1; }

/* Short laptop screens (Windows at 150%): keep the action in the first screen */
@media (min-width: 1101px) and (max-height: 720px) {
  .intro .lead { font-size: 1.1875rem; max-width: 36ch; }
  .actions { margin-top: var(--s3); }
}

/* ------------------------------------------------------------------ */
/* Narrower than a laptop: the lid is designed again, not stacked.     */
/* Name, one line, the action, then the stickers.                      */

@media (max-width: 1100px) {
  .lid--top {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    min-height: 0;
    max-height: none;
    padding-block: var(--s12) var(--s6);
  }
  .name { grid-column: 1 / -1; margin-top: 0; }
  .intro { grid-column: 1 / 6; grid-row: 2; align-self: start; margin-top: var(--s4); }
  .intro .lead { max-width: 36ch; }
  .board {
    grid-column: 1 / -1;
    grid-row: 3;
    height: clamp(380px, 46vw, 500px);
    margin-top: var(--s6);
    font-size: clamp(12px, 0.25rem + 1.45vw, 15px);
  }

  .board .stk--space  { --x: 1%;  --y: 4%;  --r: -6deg; }
  .board .stk--bridge { --x: 25%; --y: 44%; --r: 3deg; }
  .board .stk--ganga  { --x: 29%; --y: 0%;  --r: 7deg; }
  .board .stk--star   { --x: 52%; --y: 8%;  --r: 12deg; }
  .board .stk--mind   { --x: 54%; --y: 52%; --r: -10deg; }
  .board .stk--patch  { --x: 74%; --y: 22%; --r: -4deg; }
  .board .stk--class  { --x: 82%; --y: 62%; --r: 0deg; }
}

@media (max-width: 899px) {
  :root { --gutter: 16px; }

  .feature { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  /* the write-up first, so the big sticker does not repeat the hero's straight away */
  .feature__lid { grid-column: 1; order: 2; margin-left: 0; padding: var(--s8) var(--margin) var(--s12); }
  .feature__fig { position: static; }
  .feature__text { grid-column: 1; padding: var(--s8) var(--margin) var(--s12); }

  .work { padding-top: var(--s12); }
  .work > h2 { margin-bottom: var(--s6); }
  .entry {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title art" "text text" "facts facts";
    column-gap: var(--s3);
    row-gap: var(--s2);
    padding: var(--s4) 0 var(--s6);
  }
  .entry__body { display: contents; }
  .entry__body h3 { grid-area: title; align-self: center; margin: 0; }
  .entry__body p { grid-area: text; }
  .entry__art { grid-area: art; min-height: 0; font-size: 10px; padding: var(--s1) var(--s1) var(--s1) 0; place-items: center end; }
  .entry__facts {
    grid-area: facts;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    padding-top: var(--s1);
  }
  .entry__links { grid-column: 1 / -1; }

  .also { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); margin-top: var(--s8); }
  .also h3, .also ul { grid-column: 1; }
  .also ul { columns: 1; }

  .about { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-block: var(--s12); }
  .about__photo { grid-column: 1 / 5; }
  .about__text { grid-column: 1 / -1; padding-top: var(--s6); }
  .roles > div { grid-template-columns: 1fr auto; }
  .roles dd:not(.roles__when) { grid-column: 1 / -1; grid-row: 2; }
  .roles__when { grid-column: 2; grid-row: 1; }

  .lid--end { grid-template-columns: minmax(0, 1fr); padding-top: var(--s12); }
  .lid--end > * { grid-column: 1; }
  .lid--end > .end__stickers {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: var(--s6);
    padding: 0 0 0 var(--s1);
  }
}

@media (max-width: 599px) {
  .intro { grid-column: 1 / -1; }
  .board {
    height: clamp(340px, 104vw, 440px);
    margin-top: var(--s6);
    font-size: clamp(10.5px, 0.2rem + 2.3vw, 13px);
  }
  .board .stk--space  { --x: 0%;  --y: 0%;  --r: -6deg; }
  .board .stk--ganga  { --x: 58%; --y: 1%;  --r: 7deg; }
  .board .stk--bridge { --x: 25%; --y: 33%; --r: 3deg; }
  .board .stk--mind   { --x: 0%;  --y: 60%; --r: -10deg; }
  .board .stk--star   { --x: 66%; --y: 50%; --r: 12deg; }
  .board .stk--patch  { --x: 33%; --y: 79%; --r: -4deg; }
  .board .stk--class  { --x: 75%; --y: 78%; --r: 0deg; }
}

@media (max-width: 380px) {
  .topnav { gap: var(--s2); }
}

/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .stk, .tape--btn, a { transition: none; }
  .board.is-applying .stk,
  .board.is-applying .stk > span:first-child { animation: none; }
}

@media (forced-colors: active) {
  .tape, .stk > span:first-child { border: 1px solid CanvasText; }
  .space__bar > span { background: Highlight; }
}

@media print {
  .board, .topnav, .end__stickers, .feature__lid { display: none; }
  .lid, .feature, .about { background: none; }
}