/* ————— 07 · HELLO ————— 06's bento system, but the hero is a "Hi, I'm…" card: inline chips in the headline, pills, mini utility cards */

:root {
  --background: #f5f4f2;
  --highlight: #ffffff;
  --dots: #e8e5e1;
  --text: #20202c;
  --text-secondary: #20202c99;
  --link: #ea3f8b;
  --logo: #383630;
  --leader: rgba(32, 32, 44, 0.4);

  --font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --font-body: var(--font-sans);

  --wrap: 1180px;
  --measure: 840px;
  --gap: 8px;
  --radius-row: 12px;
  --radius-icon: 8px;
  --radius-image: 4px;

  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #20222b;
    --highlight: #131419;
    --dots: #272934;
    --text: #ffffff;
    --text-secondary: #ffffff80;
    --logo: #f0f1f3;
    --leader: rgba(255, 255, 255, 0.4);
  }
}

:root[data-theme="dark"] {
  --background: #20222b;
  --highlight: #131419;
  --dots: #272934;
  --text: #ffffff;
  --text-secondary: #ffffff80;
  --logo: #f0f1f3;
  --leader: rgba(255, 255, 255, 0.4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* masked dot grain — the only "depth" in the system */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dots) 1px, transparent 1.3px);
  background-size: 5px 5px;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(5deg, transparent 25%, #000 105%);
  mask-image: linear-gradient(5deg, transparent 25%, #000 105%);
}

/* dark mode: --dots is too close to the bg, so use faint light speckles */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.3px);
    opacity: 0.9;
  }
}
:root[data-theme="dark"] body::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.3px);
  opacity: 0.9;
}

header, main, footer { position: relative; z-index: 1; }

.wrap {
  width: min(92%, var(--wrap));
  margin-inline: auto;
}

a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

/* ————— header ————— */
.top {
  padding-top: 100px;
  padding-bottom: 56px;
}

.top-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: var(--logo);
}

.top nav ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top nav a {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-secondary);
}

.top nav a:hover { color: var(--text); }

/* hamburger toggle — hidden by default; mobile media query reveals it */
.nav-toggle { display: none; }

/* ————— hero ————— "Hi, I'm…" card with inline chips + mini utility cards */
.hero { padding-bottom: 60px; }

.hero-card {
  background: var(--highlight);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 1px 2px rgba(32, 32, 44, 0.04), 0 24px 48px -32px rgba(32, 32, 44, 0.22);
}

.hero-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.8;
  letter-spacing: -0.5px;
  margin: 0;
  max-width: 32em;
}

.hero-title strong { font-weight: 600; }
.hero-title .accent { color: var(--link); }
.hero-dim { color: var(--text-secondary); font-weight: 300; }

/* inline faces and pins in the headline: stickers, tilted the other way */
.hero-face, .hero-pin {
  display: inline-block;
  border-radius: 34%;
  object-fit: cover;
  background: var(--highlight);
  border: 2px solid var(--highlight);
  vertical-align: -0.18em;
  margin: 0 0.14em;
}

.hero-face {
  width: 1.95em;
  height: 1.95em;
  transform: rotate(var(--tilt, -8deg));
  box-shadow: 0 3px 10px rgba(20, 20, 20, 0.22);
  vertical-align: -0.45em;
  transition: transform 0.28s var(--spring), box-shadow 0.28s var(--spring);
}

.hero-face:hover {
  transform: rotate(calc(var(--tilt, -8deg) * -1)) scale(1.55);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--link) 60%, transparent),
    0 8px 24px rgba(20, 20, 20, 0.32);
}

.hero-wave {
  display: inline-block;
  font-size: 1.18em;
  line-height: 1;
  transform-origin: 70% 80%;
}

/* the hand only waves on hover */
.hero h1:hover .hero-wave,
.hero-wave:hover {
  animation: hero-wave 1.1s var(--spring) infinite;
}

@keyframes hero-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(12deg); }
  80% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1:hover .hero-wave,
  .hero-wave:hover { animation: none; }
}

.hero-pin {
  width: 1.5em;
  height: 1.5em;
  transform: rotate(var(--tilt, 7deg));
  box-shadow: 0 3px 10px rgba(20, 20, 20, 0.18);
  vertical-align: -0.35em;
  margin-left: 0.28em;
  transition: transform 0.28s var(--spring), box-shadow 0.28s var(--spring);
}

/* underlined place name in the headline */
/* dusk field: pinned to the top of the page, behind the hero, fading into the paper */
#field {
  position: absolute;
  top: var(--field-top, -14vh);
  left: 0;
  z-index: -1;
  width: 100%;
  height: 88vh;
  display: none;
  opacity: var(--field-o, 1);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.hero-loc {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--leader);
  transition: text-decoration-color 0.24s ease, color 0.24s ease;
}

.hero-loc:hover {
  color: var(--link);
  text-decoration-color: var(--link);
}

.hero-pin:hover {
  transform: rotate(calc(var(--tilt, 7deg) * -1)) scale(1.55);
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.32);
}

.hero-pin { cursor: zoom-in; }

.hero-pin.zoomed {
  position: relative;
  z-index: 5;
  transform: rotate(var(--tilt, 7deg)) scale(2.3);
  box-shadow: 0 14px 34px rgba(20, 20, 20, 0.38);
}

.hero-pin.zoomed:hover { transform: rotate(var(--tilt, 7deg)) scale(2.3); }

.docker-chip {
  --radius: 999px;
  --border: #00AAFF;
  --border-w: 1.5px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  vertical-align: -0.1em;
  margin: 0 0.12em;
  z-index: 1;
  padding: 0.34em 0.7em;
  border-radius: var(--radius);
  border: var(--border-w) solid color-mix(in srgb, var(--border) 50%, transparent);
  background: #000;
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--border) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 30px rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 600 1em/1 var(--font-sans);
  letter-spacing: -0.3px;
  transform: rotate(var(--tilt, -2deg));
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.docker-chip:hover {
  transform: rotate(calc(var(--tilt, -2deg) * -1)) translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--border) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 24px color-mix(in srgb, var(--border) 18%, transparent),
    0 8px 30px rgba(0, 0, 0, 0.5);
}

.docker-chip:active { transform: rotate(calc(var(--tilt, -2deg) * -1)) scale(0.98); }
.docker-chip canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.docker-chip span { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); font-family: "Jost", var(--font-sans); font-weight: 600; font-size: 1.06em; text-transform: lowercase; letter-spacing: 0.005em; }
.docker-chip svg { position: relative; width: auto; height: 1.02em; display: block; }



.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
}

.chip-icon {
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.3em;
  background: var(--background);
  border: 1px solid var(--dots);
  transform: rotate(-4deg);
  box-shadow: 0 8px 18px -10px rgba(32, 32, 44, 0.4);
  margin-inline: 3px;
}

.chip-icon svg { width: 62%; height: 62%; stroke: var(--text); }
.chip-icon-accent svg { stroke: var(--link); }

.chip-mono {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--text);
  color: var(--background);
  border-radius: 999px;
  padding: 0.1em 0.5em;
  margin-inline: 3px;
}

/* rotating role chip — JS-driven cycle; pill width adapts to the active role; click to browse all */
.chip-role {
  position: relative;
  background: var(--background);
  border: 1px solid var(--dots);
  border-radius: 999px;
  padding: 0.37em 0.5em;
  margin-inline: 3px;
  box-shadow: 0 8px 20px -12px rgba(32, 32, 44, 0.35);
  transform: rotate(var(--tilt, -1deg));
  cursor: pointer;
  transition: transform 0.24s var(--spring), box-shadow 0.24s var(--spring);
}

.chip-role:hover { transform: rotate(calc(var(--tilt, -1deg) * -1)) translateY(-2px); }
.chip-role:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* while open, lift the whole chip above the Docker chip's stacking context */
.chip-role.open { z-index: 50; }

.role-view {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  transition: width 0.45s var(--spring);
}

.role-sizer { visibility: hidden; }

.role-word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.45s var(--spring), transform 0.45s var(--spring);
}

.role-word.active { opacity: 1; transform: translateY(0); }

.role-caret {
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.4em;
  stroke: var(--text-secondary);
  vertical-align: middle;
  transition: transform 0.24s var(--spring);
}

.chip-role.open .role-caret { transform: rotate(180deg); }

.role-list {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: 90vw;
  min-width: 200px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--highlight);
  border: 1px solid var(--dots);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(32, 32, 44, 0.35);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.role-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* top/bottom fade via sticky overlays so the border stays visible */
.role-list::before,
.role-list::after {
  content: "";
  position: sticky;
  z-index: 3;
  flex: 0 0 auto;
  height: 28px;
  margin-inline: -8px;
  pointer-events: none;
}
.role-list::before { top: -8px; margin-bottom: -28px; background: linear-gradient(var(--highlight), transparent); }
.role-list::after { bottom: -8px; margin-top: -28px; background: linear-gradient(transparent, var(--highlight)); }

.chip-role.open .role-list { opacity: 1; transform: translateX(-50%); visibility: visible; pointer-events: auto; transition: opacity 0.2s ease, visibility 0s linear 0s; }

.role-list li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.2px;
  line-height: 1.4;
  color: var(--text-secondary);
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

.role-list li:hover { background: var(--background); color: var(--text); }

.role-list li.active { background: var(--text); color: var(--background); font-weight: 500; }

/* CRYZ "Hero background" off: strip the hero card's surface */
html.cryz-no-hero-bg .hero-card {
  background: transparent;
  box-shadow: none;
}

/* CRYZ "Hero icons" off: hide every image, icon and emoji in the hero */
html.cryz-no-hero-icons .hero img,
html.cryz-no-hero-icons .hero svg,
html.cryz-no-hero-icons .hero-wave,
html.cryz-no-hero-icons .hero .term-cursor { display: none; }
html.cryz-no-hero-icons .hero .mini-label { display: block; }

/* role icon: a bigger transparent sticker that overflows the pill and pops in on change */
.role-icon {
  width: 2.3em;
  height: 2.3em;
  margin: -0.65em 0.18em -0.65em -0.14em;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 5px 7px rgba(32, 32, 44, 0.3));
}
.role-icon.swap { animation: roleIconPop 0.55s var(--spring); }
@keyframes roleIconPop {
  0% { opacity: 0; transform: scale(0.4) rotate(-16deg); }
  55% { opacity: 1; transform: scale(1.14) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.role-list li { display: flex; align-items: center; gap: 12px; }
.role-li-ico { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 4px rgba(32, 32, 44, 0.22)); }
.chip-role.open .role-li-ico { animation: liIcoIn 0.5s var(--spring) backwards; }
@keyframes liIcoIn { from { opacity: 0; transform: scale(0.3) rotate(-18deg); } to { opacity: 1; transform: none; } }

.hero-rule {
  width: 40px;
  height: 1px;
  background: var(--leader);
  margin: 32px 0 20px;
}

.hero-whisper {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.hero-whisper strong { font-weight: 600; color: var(--text); }

.hero-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  transition: transform 0.24s var(--spring);
}

.pill-dark {
  background: var(--text);
  color: var(--background);
  box-shadow: 0 10px 24px -12px rgba(32, 32, 44, 0.5);
}

a.pill-dark:hover { text-decoration: none; transform: translateY(-2px); }

.pill-dark .arrow { display: inline-block; transition: transform 0.24s var(--spring); }
a.pill-dark:hover .arrow { transform: translateX(3px); }

.pill-open {
  background: var(--background);
  border: 1px solid var(--dots);
  color: var(--text-secondary);
  padding: 11px 18px;
}

.pill-open .brand {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

.pill-open .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--link);
  flex: none;
}

.hero-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.hero-skills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--background);
  border: 1px solid var(--dots);
  border-radius: 999px;
  padding: 7px 14px;
}

.hero-skills svg { width: 14px; height: 14px; stroke: var(--text); flex: none; }

/* mini utility card row */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}

.mini {
  display: flex;
  flex-direction: column;
  background: var(--highlight);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(32, 32, 44, 0.04), 0 18px 36px -28px rgba(32, 32, 44, 0.2);
}

a.mini { color: var(--text); }

/* no lift: hovering lights up the timeline's scrollbar as the affordance */
a.mini:hover { text-decoration: none; }
a.mini:hover .mini-scroll::-webkit-scrollbar-thumb { background: var(--link); }

.mini-cta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--link); }
.mini-cta .arrow { display: inline-block; transition: transform 0.24s var(--spring); }
a.mini:hover .mini-cta .arrow { transform: translateX(3px); }

.mini-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--background);
  border: 1px solid var(--dots);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0;
}

.mini-label svg { width: 13px; height: 13px; stroke: var(--text); stroke-width: 1.8; flex: none; }

/* hover-revealed external-link glyph on the place name */
.loc-ext {
  display: inline-flex;
  align-items: center;
  width: 0;
  height: 1em;
  margin-left: 0;
  vertical-align: middle;
  overflow: hidden;
  opacity: 0;
  transform: translateY(2px);
  transition: width 0.24s var(--spring), margin-left 0.24s var(--spring), opacity 0.24s ease, transform 0.24s var(--spring);
}

.loc-ext svg { width: 0.72em; height: 0.72em; stroke: currentColor; stroke-width: 2.4; flex: none; }

.hero-loc:hover .loc-ext, .hero-loc:focus-visible .loc-ext { width: 0.72em; margin-left: 0.16em; opacity: 1; transform: none; }

/* scrollable experience preview — no dates, fade at the bottom edge */
.mini-scroll {
  list-style: none;
  margin: 16px 0 0;
  padding-left: 20px;
  max-height: 150px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, #000 84%, transparent);
}

.mini-scroll::-webkit-scrollbar { width: 4px; }
.mini-scroll::-webkit-scrollbar-thumb { background: var(--dots); border-radius: 4px; }
.mini-scroll::-webkit-scrollbar-track { background: transparent; }

/* the rail lives on each item so the dots stay inside the scroll box */
.mini-scroll li {
  position: relative;
  padding: 6px 0 6px 16px;
  border-left: 1px dashed var(--leader);
}

.mini-scroll li:last-child { border-left-color: transparent; }

.mini-scroll li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
  transition: background-color 0.24s var(--spring), box-shadow 0.24s var(--spring), transform 0.24s var(--spring);
}

.mini-scroll li:first-child::before { background: var(--link); }

/* illuminated on hover */
.mini-scroll li:hover::before {
  background: var(--link);
  box-shadow: 0 0 0 3px rgba(234, 63, 139, 0.16), 0 0 12px 2px rgba(234, 63, 139, 0.55);
  transform: scale(1.25);
}

.mini-scroll b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.mini-scroll span { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; line-height: 1.35; }




.mini-steps {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-steps li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: -0.3px;
  color: var(--text-secondary);
  background: var(--background);
  border: 1px solid var(--dots);
  border-radius: 999px;
  padding: 6px 12px;
}

.mini-steps li.active { background: var(--text); color: var(--background); border-color: transparent; }


/* location card — photo fills the card (8px inset), airbnb-style scrim, name over it */
.mini-where {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  background: color-mix(in srgb, var(--highlight) 55%, transparent);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

/* the photo sits on frosted glass: the dusk field drifts visibly behind it */
.mini-where .mini-photo { opacity: 0.93; }
.mini-where .mini-photo-alt { opacity: 0; pointer-events: none; }

.mini-photo-frame {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 0;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  overflow: hidden;
  border-radius: 10px;
}

.mini-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.mini-where::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(18, 16, 22, 0.74) 0%, rgba(18, 16, 22, 0.34) 34%, rgba(18, 16, 22, 0) 62%);
}

.mini-where > *:not(.mini-photo):not(.mini-photo-frame) { position: relative; z-index: 2; }

.mini-photo { transition: transform 0.35s var(--spring), opacity 0.35s ease; cursor: zoom-in; }
.mini-where:hover .mini-photo { transform: scale(1.06); }
.mini-photo.zoomed { transform: scale(1.18); }
.mini-where:hover .mini-photo.zoomed { transform: scale(1.24); }
.mini-where:has(.mini-map:hover) .mini-photo { opacity: 0; }
.mini-where:has(.mini-map:hover) .mini-photo-alt { opacity: 0.93; }

.mini-big {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.5px;
  margin: auto -4px 0;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.mini-where-txt { margin-top: auto; }
.mini-where .mini-big { margin: 0 -4px; }
.mini-from {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  margin: 3px -4px 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.mini-map {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mini-map:hover { color: var(--link); border-bottom-color: var(--link); }

.pill-line {
  align-self: flex-start;
  font-size: 12.5px;
  padding: 8px 14px;
  background: var(--background);
  border: 1px solid var(--dots);
  color: var(--text);
}

a.pill-line:hover { text-decoration: none; transform: translateY(-1px); }

/* hero depth in dark mode: hairline rings instead of soft shadows */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-card, :root:not([data-theme="light"]) .mini { box-shadow: 0 0 0 1px var(--dots), 0 18px 36px -28px #000; }
  :root:not([data-theme="light"]) .chip-role, :root:not([data-theme="light"]) .chip-icon, :root:not([data-theme="light"]) .pill-open, :root:not([data-theme="light"]) .hero-skills li, :root:not([data-theme="light"]) .mini-label, :root:not([data-theme="light"]) .mini-steps li, :root:not([data-theme="light"]) .pill-line { border-color: var(--dots); }
}
:root[data-theme="dark"] .hero-card, :root[data-theme="dark"] .mini { box-shadow: 0 0 0 1px var(--dots), 0 18px 36px -28px #000; }
:root[data-theme="dark"] .chip-role, :root[data-theme="dark"] .chip-icon, :root[data-theme="dark"] .pill-open, :root[data-theme="dark"] .hero-skills li, :root[data-theme="dark"] .mini-label, :root[data-theme="dark"] .mini-steps li, :root[data-theme="dark"] .pill-line { border-color: var(--dots); }

/* ————— section eyebrow ————— */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.work { padding-bottom: 140px; }

/* ————— bento ————— */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(176px, auto);
  gap: var(--gap);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--highlight);
  border-radius: var(--radius-row);
  color: var(--text);
  overflow: hidden;
  transition: transform 0.24s var(--spring), background-color 0.24s var(--spring);
}

a.tile:hover {
  text-decoration: none;
  transform: translateY(-3px);
}

.tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tile-index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
}

.tile-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-icon);
  background: var(--background);
  display: grid;
  place-items: center;
  flex: none;
}

.tile-icon svg { width: 20px; height: 20px; stroke: var(--text); }

.tile-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.tile-logo.t-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile-logo { display: none; }
  :root:not([data-theme="light"]) .tile-logo.t-dark { display: block; }
}
:root[data-theme="dark"] .tile-logo { display: none; }
:root[data-theme="dark"] .tile-logo.t-dark { display: block; }

.tile h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 16px 0 0;
}

.tile .blurb {
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.tile-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.tile-foot::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 58px;
  border-top: 1px dashed var(--leader);
  opacity: 0.6;
}

.tile-metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: -0.5px;
  color: var(--text);
}

.tile-dates {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
}

.tile .study {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--link);
}

.tile .study .arrow { display: inline-block; transition: transform 0.24s var(--spring); }
a.tile:hover .study .arrow { transform: translateX(4px); }

/* featured — Gordon */
.t-gordon {
  grid-column: span 2;
  grid-row: span 2;
  padding: 32px;
}

.t-gordon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dots) 1.4px, transparent 1.6px);
  background-size: 10px 10px;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000 5%, transparent 55%);
  mask-image: radial-gradient(120% 90% at 100% 100%, #000 5%, transparent 55%);
}

.t-gordon > * { position: relative; z-index: 1; }

.t-gordon h3 {
  font-size: 36px;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin-top: 24px;
}

.t-gordon .blurb { font-size: 16px; max-width: 40ch; }

.t-gordon .big-stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  letter-spacing: -0.5px;
  margin: auto 0 0;
  padding-top: 32px;
}

.t-gordon .big-stat small {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.t-gordon .tile-foot { padding-top: 8px; }
.t-gordon .tile-foot::before { display: none; }

/* wide tiles */
.t-wide { grid-column: span 2; }
.t-x3 { grid-column: span 3; }
.t-x4 { grid-column: span 4; }

/* work section followed by personal projects */
.work-tight { padding-bottom: 64px; }

.personal .t-wide h3 { margin-top: 16px; max-width: none; }

.xp-banner { position: relative; overflow: hidden; }
.xp-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dots) 1.4px, transparent 1.6px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000 5%, transparent 55%);
  mask-image: radial-gradient(90% 120% at 100% 0%, #000 5%, transparent 55%);
}
.xp-banner > * { position: relative; z-index: 1; }
.xp-main { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: auto; padding-top: 14px; }
.xp-main h3 { margin: 0; }
.xp-main .blurb { margin: 6px 0 0; }
.xp-main .study { flex: none; }

.tile-preview {
  display: block;
  margin-top: 16px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--dots);
  aspect-ratio: 16 / 9;
  background: var(--background);
}

.tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s var(--spring);
}

a.tile:hover .tile-preview img { transform: scale(1.035); }

.t-wide .tile-body { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.t-wide h3 { margin-top: 0; flex: none; max-width: 14ch; }
.t-wide .blurb { margin-top: 0; }

/* contact tile */
.t-contact h3 { margin-top: 0; }
.t-contact .lines { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 24px; }
.t-contact .lines a, .t-contact .lines span {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
}
.t-contact .lines .k {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: none;
  width: 72px;
}
.t-contact .lines a { color: var(--link); }
.t-contact .lines i {
  flex: 1;
  border-top: 1px dashed var(--leader);
  opacity: 0.6;
  transform: translateY(-4px);
}

/* ————— about ————— */
.about { padding-bottom: 140px; }
.contact-card { max-width: 560px; }

.about-list {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  line-height: 1.5;
}

.about-list .k {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: none;
  width: 120px;
}

.about-list .dashed {
  flex: none;
  width: 24px;
  border-top: 1px dashed var(--leader);
  transform: translateY(-5px);
}

.about-list p { margin: 0; font-size: 15px; }
.about-list p b { font-weight: 600; }

/* ————— footer ————— */
.bottom { padding: 40px 0; }

.bottom-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
}

.bottom-inner nav { display: flex; gap: 24px; }
.bottom-inner a { color: var(--text); }
.bottom-inner a:hover { color: var(--link); }

.to-top { font-family: var(--font-mono); color: var(--text); }

/* ————— gordon detail page ————— */
.detail { padding-bottom: 140px; }

.detail .wrap { width: min(92%, var(--measure)); }
.detail.cv .wrap { width: min(92%, var(--wrap)); }

.detail h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 0;
}

.detail .sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 8px 0 0;
}

.leader {
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: 560px;
  margin: 32px 0 0;
}

.leader b { font-family: var(--font-sans); font-weight: 600; font-size: 16px; }
.leader i { flex: 1; border-top: 1px dashed var(--leader); transform: translateY(-5px); }
.leader .mono { font-size: 14px; color: var(--text-secondary); flex: none; }

.detail section { margin-top: 88px; }
.detail h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.detail p { margin: 0 0 16px; line-height: 1.625; max-width: 68ch; }
.detail ul { margin: 0; padding-left: 20px; max-width: 68ch; }
.detail li { margin-bottom: 12px; line-height: 1.625; }
.detail li a { color: var(--link); }

.detail .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.detail .stat {
  background: var(--highlight);
  border-radius: var(--radius-row);
  padding: 20px;
}

.detail .stat b {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.5px;
}

.detail .stat span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.caveat {
  border-left: 1px dashed var(--leader);
  padding: 4px 0 4px 20px;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 68ch;
}

.detail hr.dash {
  border: 0;
  border-top: 1px dashed var(--leader);
  margin: 120px 0 0;
}

.detail .back-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  font-family: var(--font-sans);
  font-size: 16px;
}

.detail .back-nav a { color: var(--link); }

/* ————— resume page ————— */
.detail section.cv-head { margin-top: 0; }

.cv-head h1 { font-size: clamp(32px, 4.2vw, 44px); line-height: 1.15; letter-spacing: -1px; margin: 0; }

.cv-avatar {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}

/* hibiscus glow that blooms behind the sticker on hover */
.cv-avatar::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 36%;
  background: conic-gradient(from 160deg, var(--link), #ff9ec6, var(--link));
  filter: blur(12px);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.4s ease, transform 0.5s var(--spring);
}

.cv-avatar:hover::after { opacity: 0.8; transform: scale(1); }

.cv-sticker {
  display: block;
  width: 156px;
  height: 156px;
  object-fit: cover;
  border-radius: 30%;
  border: 4px solid var(--highlight);
  box-shadow: 0 0 0 1px var(--hairline), 0 10px 26px -8px rgba(20, 20, 20, 0.30);
  transform: rotate(-6deg);
  cursor: pointer;
  transition: transform 0.42s var(--spring), box-shadow 0.42s var(--spring);
}

.cv-avatar:hover .cv-sticker {
  transform: rotate(4deg) scale(1.07) translateY(-4px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--link) 60%, transparent),
    0 22px 48px -12px rgba(20, 20, 20, 0.46);
}

.cv-avatar:active .cv-sticker { transform: rotate(0deg) scale(0.99); }

.cv-id { display: flex; align-items: center; gap: 40px; }
.cv-id-text { min-width: 0; flex: 1; }
.cv-id h1 { margin: 0; }

.cv-head .sub { font-size: 20px; margin-top: 14px; }
.cv-aka { font-family: var(--font-mono); font-size: 13px; color: var(--link); margin-top: 8px; }

.cv-summary { margin: 20px 0 0; line-height: 1.625; font-size: 15.5px; color: var(--text-secondary); }
.cv-summary a { color: var(--link); text-decoration: none; }
.cv-summary a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cv-summary a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0.8em;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  transition: opacity 0.2s ease, width 0.2s ease, margin-left 0.2s ease;
}
.cv-summary a[target="_blank"]:hover::after, .cv-summary a[target="_blank"]:focus-visible::after { width: 0.8em; margin-left: 3px; opacity: 1; }
.detail .cv-summary { max-width: none; }
.cv-summary-aka { margin-top: 10px; color: var(--text-secondary); }

.cv-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.cv-pills a.pill-dark { background: var(--link); color: #fff; }
.cv-pills a.pill-open { color: var(--text); }

.cv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--gap); }

.cv-stat b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 400; font-size: 26px; letter-spacing: -1px; line-height: 34px; height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-stat span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; min-height: 36px; }

/* timeline */
.cv-timeline { margin: 0; }

.cv-job { position: relative; margin-left: 4px; padding: 0 0 44px 32px; border-left: 1px dashed var(--leader); }
.cv-job:last-child { padding-bottom: 0; border-left-color: transparent; }

.cv-job::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
}

.cv-job.now::before { background: var(--link); box-shadow: 0 0 0 4px rgba(234, 63, 139, 0.14); }

.cv-job-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.cv-job h3 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.4px; margin: 0; }

.cv-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-secondary); background: var(--background); border: 1px solid var(--dots); border-radius: 999px; padding: 3px 10px; vertical-align: 3px; white-space: nowrap; }
.cv-tag .cv-ico { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.cv-dates { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); background: var(--background); border: 1px solid var(--dots); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }

.cv-role { display: inline-flex; font-size: 13px; font-weight: 500; color: var(--link); background: rgba(234, 63, 139, 0.08); border-radius: 999px; padding: 4px 12px; margin: 10px 0 0; }

.cv-job ul { margin: 14px 0 0; padding-left: 18px; }
.cv-job li { font-size: 14.5px; line-height: 1.625; margin-bottom: 8px; }
.cv-job li::marker { color: var(--link); }
.cv-job li:last-child { margin-bottom: 0; }

/* skills + edu/vol as cards */
.cv-skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.cv-skill b { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 12px; }
.cv-skill .hero-skills { margin: 0; }

.cv-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.cv-two h2 { margin-top: 0; }

.cv-edu, .cv-vol { list-style: none; margin: 0; padding: 0; }

.cv-edu li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--leader); }
.cv-edu li:first-child { padding-top: 0; }
.cv-edu li:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-edu b { font-size: 14.5px; font-weight: 600; }
.cv-edu span { font-size: 12px; color: var(--text-secondary); text-align: right; flex: none; max-width: 52%; }

.cv-vol li { padding: 12px 0; border-bottom: 1px dashed var(--leader); }
.cv-vol li:first-child { padding-top: 0; }
.cv-vol li:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-vol b { display: block; font-size: 14.5px; font-weight: 600; }
.cv-vol span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.cv-vol p { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* education: a single-colour logo strip */
.cv-edu-strip { margin: 0 0 8px; }
.edu-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 44px; color: var(--text-secondary); }
.edu-mark { display: flex; flex-direction: column; gap: 3px; line-height: 1; transition: color 0.24s var(--spring); }
.edu-mark b { font-family: var(--font-sans); font-weight: 700; font-size: 23px; letter-spacing: -0.6px; }
.edu-mark i { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.75; }
.edu-mark:hover { color: var(--text); }
.edu-note { margin: 24px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.edu-note b { color: var(--text); font-weight: 600; }
.cv-beyond { margin-top: 40px; }

@media (max-width: 1024px) {
  .cv-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 667px) {
  .cv-head .hero-card { padding: 24px; border-radius: 20px; }
  .cv-id { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cv-sticker { width: 120px; height: 120px; }
  .cv-skill-grid, .cv-two, .cv-stats { grid-template-columns: 1fr; }
  .cv-job { padding-left: 24px; }
  /* hero on mobile: shrink title so pills stay on the same line */
  .hero { padding-bottom: 40px; }
  .hero-card { padding: 36px 24px 28px; border-radius: 24px; }
.hero-title { font-size: clamp(17px, 4.8vw, 24px); line-height: 1.75; max-width: none; }
  .hero-whisper { font-size: 14px; }
  /* keep pills inline with the text flow, as a tidy flex pill */
  .chip-role { display: inline-flex; align-items: center; gap: 0.32em; font-size: 0.88em; padding: 0.22em 0.55em; vertical-align: middle; }
  /* sticker icon fully inside the pill, no overflow, no drop-shadow */
  .role-icon { width: 1.5em; height: 1.5em; margin: 0; filter: none; }
  .role-view { display: block; }
  .role-caret { margin-left: 0.1em; }
  /* pill always on its own line: swapping word lengths must not reflow the title */
  .role-br { display: none; }
  .chip-role { display: flex; width: max-content; margin-top: 4px; }
  .hero-face { width: 1.8em; height: 1.8em; margin: 0 0.12em; }
  /* tooltips must not widen the page: anchor them to the term's right edge */
  .term[data-tip]::after { left: auto; right: 0; width: min(240px, 78vw); }
  body { overflow-x: hidden; }
}

/* ————— playground catalog ————— */
.xp { padding: 0 0 140px; }

.xp-head { margin-bottom: 8px; }
.xp-head h1 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.8px; line-height: 1.2; margin: 0; }
.xp-head .sub { font-family: var(--font-sans); font-weight: 300; font-size: 19px; color: var(--text-secondary); margin: 8px 0 0; max-width: 62ch; }

.xp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: var(--gap); }

.xp-card {
  display: flex;
  flex-direction: column;
  background: var(--highlight);
  border-radius: 16px;
  padding: 20px 20px 14px;
  box-shadow: 0 1px 2px rgba(32, 32, 44, 0.04), 0 18px 36px -28px rgba(32, 32, 44, 0.2);
}

.xp-shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; border-radius: 10px; border: 1px solid var(--dots); background: var(--background); display: block; }

.xp-shot-plain { display: grid; place-items: center; }
.xp-shot-live { position: relative; overflow: hidden; }
.xp-shot-live iframe { position: absolute; top: 0; left: 50%; width: 1280px; height: 720px; transform: translateX(-50%) scale(0.4375); transform-origin: top center; border: 0; pointer-events: none; }
.xp-glyph { font-size: 44px; color: var(--link); }

.xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; }
.xp-top h3 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.4px; margin: 0; }
.xp-domain { font-size: 12px; color: var(--text-secondary); flex: none; }

.xp-blurb { font-size: 14px; line-height: 1.625; color: var(--text-secondary); margin: 8px 0 0; }

.xp-tags { margin: 14px 0 20px; }

.xp-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--dots); }
.xp-links .pill-dark { background: var(--link); }
.xp-links:empty { display: none; }
.xp-links .pill { padding: 9px 16px; font-size: 13px; }
.pill .pill-ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xp-card { box-shadow: 0 0 0 1px var(--dots), 0 18px 36px -28px #000; }
}
:root[data-theme="dark"] .xp-card { box-shadow: 0 0 0 1px var(--dots), 0 18px 36px -28px #000; }

@media (max-width: 1024px) {
  .xp-grid { grid-template-columns: 1fr; }
}

/* ————— responsive ————— */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-gordon { grid-column: span 2; grid-row: span 1; }
  .t-gordon h3 { font-size: 28px; }
  .t-x3, .t-x4 { grid-column: span 2; }
  .detail .stats { grid-template-columns: repeat(2, 1fr); }
  .hero-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 667px) {
  .top { padding-top: 40px; padding-bottom: 40px; }
  /* header: wordmark left, hamburger right; nav becomes a dropdown panel.
     header/main/footer share z-index:1, so lift the whole header while open
     or the panel paints underneath the hero card. */
  header.top.nav-open { z-index: 200; }
  /* header: wordmark left, hamburger right; nav becomes a dropdown panel */
  .top-inner { position: relative; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .wordmark { white-space: nowrap; flex: none; order: 1; margin-right: auto; }
  .nav-toggle { order: 2; flex: none; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 1px solid var(--dots); border-radius: 12px; color: var(--text); cursor: pointer; padding: 0; }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle .bar { transition: transform 0.2s var(--spring), opacity 0.15s; transform-origin: center; }
  .nav-open .nav-toggle .b1 { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle .b2 { opacity: 0; }
  .nav-open .nav-toggle .b3 { transform: translateY(-5px) rotate(-45deg); }
  .top nav { order: 3; }
  .top nav ul { display: none; }
  .top-inner.nav-open nav ul {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; top: 86px; right: 4%; left: auto; z-index: 60;
    max-height: calc(100dvh - 110px); overflow: auto;
    background: var(--highlight); border: 1px solid var(--dots); border-radius: 16px;
    padding: 8px; min-width: 180px;
    box-shadow: 0 1px 2px rgba(32, 32, 44, 0.06), 0 24px 48px -24px rgba(32, 32, 44, 0.35);
  }
  .top-inner.nav-open nav ul a {
    display: block; width: 100%; padding: 11px 14px; border-radius: 10px;
    font-size: 15px; color: var(--text-secondary);
  }
  .top-inner.nav-open nav ul a:hover { color: var(--text); background: var(--background); }
  .top-inner.nav-open nav ul li { width: 100%; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .t-gordon, .t-wide, .t-x3, .t-x4 { grid-column: span 1; }
  .tile { padding: 20px; }
  .t-gordon .tile-foot::before { left: 20px; right: 20px; }
  .work, .about { padding-bottom: 88px; }
  .about-list li { flex-wrap: wrap; gap: 4px 16px; }
  .about-list .dashed { display: none; }
  .detail .sub { font-size: 20px; }
  /* hero mobile rules live in the consolidated block above (search: hero on mobile) */
  .hero-cards { grid-template-columns: 1fr; }
  .leader { flex-wrap: wrap; }
  .leader i { display: none; }
  .detail .stats { grid-template-columns: 1fr; }
  .bottom-inner { flex-wrap: wrap; gap: 12px 24px; }
  .bottom-inner nav { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile, .tile .study .arrow, .pill, .pill-dark .arrow, a.mini, .mini-cta .arrow, .tile-preview img { transition: none; }
  a.tile:hover, a.pill-dark:hover, a.pill-line:hover, a.mini:hover { transform: none; }
  .role-word, .role-view, .chip-role { transition: none; }
  .chip-role.open .role-list { display: flex; visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); transition: none; }
}

/* ————— cryz: the harlequin backdoor ————— */
.cryz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-weight: 500;
  line-height: 1;
  position: relative;
  transition: color 0.24s ease;
}



.cryz svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--link);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--spring);
}

.cryz svg .c2 { fill: var(--link); stroke: none; opacity: 0.9; }

.cryz:hover { color: var(--text); }
.cryz:hover svg { transform: rotate(-8deg) scale(1.12); }

/* ————— CRYZ mode ————— the side panel and its switches */
html.cryz-field #field { display: block; }

/* fade the page background over the top band so the menu stays readable */
html.cryz-field .top { position: relative; }
html.cryz-field .top::before {
  content: "";
  position: absolute;
  left: -50vw;
  right: -50vw;
  top: -20vh;
  height: 240px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(var(--background), color-mix(in srgb, var(--background) 55%, transparent) 55%, transparent);
}

/* Accent colour: recolours the --link accent in any theme (independent of monochrome). */
:root[data-accent="bn"]     { --link: #6b6864; }
:root[data-accent="pink"]   { --link: #ea3f8b; }
:root[data-accent="blue"]   { --link: #2f6fed; }
:root[data-accent="green"]  { --link: #1f9d57; }
:root[data-accent="amber"]  { --link: #d98324; }
:root[data-accent="violet"] { --link: #7c5cff; }

/* dark scheme accent values (forced dark) */
:root[data-theme="dark"][data-accent="bn"]     { --link: #b9b6b2; }
:root[data-theme="dark"][data-accent="pink"]   { --link: #ff6fb0; }
:root[data-theme="dark"][data-accent="blue"]   { --link: #6d9bff; }
:root[data-theme="dark"][data-accent="green"]  { --link: #4cc97f; }
:root[data-theme="dark"][data-accent="amber"]  { --link: #f0a34e; }
:root[data-theme="dark"][data-accent="violet"] { --link: #a48bff; }

/* dark scheme accent values (system dark) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"][data-accent="bn"]     { --link: #b9b6b2; }
  :root[data-theme="system"][data-accent="pink"]   { --link: #ff6fb0; }
  :root[data-theme="system"][data-accent="blue"]   { --link: #6d9bff; }
  :root[data-theme="system"][data-accent="green"]  { --link: #4cc97f; }
  :root[data-theme="system"][data-accent="amber"]  { --link: #f0a34e; }
  :root[data-theme="system"][data-accent="violet"] { --link: #a48bff; }
}

/* Monochrome: only when this switch is on do the images desaturate.
   --duo is the image filter: pure grey by default, a duotone tint of the accent.
   The dusk field (#field) is excluded — its palette is generated from the accent in JS. */
html.cryz-mono { --duo: grayscale(1); }
html.cryz-mono img,
html.cryz-mono canvas:not(#field),
html.cryz-mono video { filter: var(--duo); }
:root.cryz-mono[data-accent="pink"]   { --duo: grayscale(1) sepia(1) saturate(2.6) hue-rotate(295deg); }
:root.cryz-mono[data-accent="blue"]   { --duo: grayscale(1) sepia(1) saturate(2.4) hue-rotate(188deg); }
:root.cryz-mono[data-accent="green"]  { --duo: grayscale(1) sepia(1) saturate(2.4) hue-rotate(118deg); }
:root.cryz-mono[data-accent="amber"]  { --duo: grayscale(1) sepia(1) saturate(2.2) hue-rotate(5deg); }
:root.cryz-mono[data-accent="violet"] { --duo: grayscale(1) sepia(1) saturate(2.4) hue-rotate(222deg); }

html.cryz-no-grain body::before { display: none; }

html.cryz-no-tilt .hero-face,
html.cryz-no-tilt .hero-pin,
html.cryz-no-tilt .docker-chip,
html.cryz-no-tilt .chip-role { --tilt: 0deg; }

html.cryz-harlequin body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 90deg at 50% 50%, var(--text) 25%, transparent 0 50%, var(--text) 0 75%, transparent 0);
  background-size: 84px 84px;
  transform: rotate(45deg);
  opacity: 0.05;
  animation: cryz-drift 24s linear infinite;
}

@keyframes cryz-drift { to { background-position: 84px 168px; } }

/* segmented control (theme) and swatches (accent) */
.cryz-seg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
}

.cryz-seg-label { flex: 1; }

.cryz-seg {
  display: inline-flex;
  border: 1px solid var(--dots);
  border-radius: 999px;
  overflow: hidden;
}

.cryz-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cryz-seg button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.cryz-seg button.on { background: var(--text); color: var(--background); }

.cryz-dd { position: relative; }

.cryz-dd-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--dots);
  border-radius: 999px;
  background: var(--background);
  color: var(--text);
  font: 500 12px/1 var(--font-sans);
  padding: 6px 8px 6px 10px;
  cursor: pointer;
}

.cryz-dd-cur { display: inline-flex; align-items: center; gap: 6px; }
.cryz-dd-ic { display: inline-flex; width: 15px; height: 15px; flex: none; }
.cryz-dd-ic svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.cryz-dd-chev {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.cryz-dd.open .cryz-dd-chev { transform: rotate(180deg); }

.cryz-dd-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: none;
  flex-direction: column;
  min-width: 118px;
  padding: 4px;
  background: var(--highlight);
  border: 1px solid var(--dots);
  border-radius: 12px;
  box-shadow: 0 16px 36px -18px rgba(20, 20, 20, 0.5);
}
.cryz-dd.open .cryz-dd-list { display: flex; }

.cryz-dd-opt {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cryz-dd-opt:hover { background: var(--background); color: var(--text); }
.cryz-dd-opt.on { color: var(--text); }
.cryz-dd-opt.on::after { content: "\2713"; margin-left: auto; color: var(--link); font-weight: 700; }

.cryz-panel {
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 90;
  font-family: var(--font-sans);
}

.cryz-panel {
  width: 220px;
  padding: 14px;
  border: 1px solid var(--dots);
  border-radius: 16px;
  background: var(--highlight);
  box-shadow: 0 18px 44px -22px rgba(20, 20, 20, 0.45);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s var(--spring);
}

.cryz-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.cryz-panel-title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.cryz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
}

.cryz-row span { flex: 1; }
.cryz-row input { position: absolute; opacity: 0; pointer-events: none; }

.cryz-row i {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--dots);
  transition: background 0.24s ease;
  flex: none;
}

.cryz-row i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.25);
  transition: transform 0.24s var(--spring);
}

.cryz-row input:checked + i { background: var(--link); }
.cryz-row input:checked + i::after { transform: translateX(14px); }
.cryz-row input:focus-visible + i { outline: 2px solid var(--link); outline-offset: 2px; }

.cryz-reset {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cryz-reset:hover { color: var(--link); }

@media (prefers-reduced-motion: reduce) {
  html.cryz-harlequin body::after { animation: none; }
}

/* Monochrome also tints the whole UI a touch toward the accent, not just images. */
html.cryz-mono {
  --background: color-mix(in srgb, var(--link) 5%, #f5f4f2);
  --highlight:  color-mix(in srgb, var(--link) 7%, #ffffff);
  --dots:       color-mix(in srgb, var(--link) 10%, #e8e5e1);
  --text:       color-mix(in srgb, var(--link) 10%, #20202c);
  --leader:     color-mix(in srgb, var(--link) 10%, rgba(32, 32, 44, 0.4));
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"].cryz-mono {
    --background: color-mix(in srgb, var(--link) 7%, #20222b);
    --highlight:  color-mix(in srgb, var(--link) 9%, #131419);
    --dots:       color-mix(in srgb, var(--link) 12%, #272934);
    --text:       color-mix(in srgb, var(--link) 9%, #ffffff);
    --leader:     color-mix(in srgb, var(--link) 9%, rgba(255, 255, 255, 0.4));
  }
}
:root[data-theme="dark"].cryz-mono {
  --background: color-mix(in srgb, var(--link) 7%, #20222b);
  --highlight:  color-mix(in srgb, var(--link) 9%, #131419);
  --dots:       color-mix(in srgb, var(--link) 12%, #272934);
  --text:       color-mix(in srgb, var(--link) 9%, #ffffff);
  --leader:     color-mix(in srgb, var(--link) 9%, rgba(255, 255, 255, 0.4));
}

/* Field-parameters "Tune" row + modal */
.cryz-tune-row {
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 6px 8px 6px 24px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  gap: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cryz-sep { height: 1px; margin: 10px 0; background: var(--dots); }
.cryz-tune-row[hidden] { display: none; }
.cryz-tune-row:hover { background: color-mix(in srgb, var(--link) 9%, transparent); }
.cryz-row .cryz-tune-arrow { flex: none; width: 14px; color: var(--text-secondary); }
.cryz-row .cryz-tune-txt { flex: 1; text-align: left; }
.cryz-row .cryz-tune-go { flex: none; color: var(--text-secondary); transition: transform 0.2s var(--spring), color 0.18s ease; }
.cryz-tune-row:hover .cryz-tune-go { transform: translateX(2px); color: var(--link); }

.cryz-modal-root { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; pointer-events: none; }
.cryz-modal-root.open { pointer-events: auto; }
.cryz-modal-backdrop { position: absolute; inset: 0; background: rgba(18, 18, 24, 0.42); opacity: 0; transition: opacity 0.24s ease; }
.cryz-modal-root.open .cryz-modal-backdrop { opacity: 1; }
.cryz-modal {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  padding: 16px 18px 18px;
  border: 1px solid var(--dots);
  border-radius: 18px;
  background: var(--highlight);
  color: var(--text);
  font-family: var(--font-sans);
  box-shadow: 0 30px 70px -30px rgba(20, 20, 20, 0.6);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.24s ease, transform 0.28s var(--spring);
}
.cryz-modal-root.open .cryz-modal { opacity: 1; transform: none; }
.cryz-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cryz-modal-title { margin: 0; font: 400 10px var(--font-mono); letter-spacing: 0.14em; color: var(--text-secondary); }
.cryz-modal-x { border: 0; background: none; color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cryz-modal-x:hover { color: var(--link); }
.cryz-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 4px; }
.cryz-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.cryz-slider label { font-size: 13px; }
.cryz-slider-val { font: 500 12px var(--font-mono); color: var(--text-secondary); }
.cryz-slider input[type="range"] { grid-column: 1 / -1; width: 100%; height: 22px; accent-color: var(--link); }
.cryz-modal-foot { margin-top: 12px; display: flex; justify-content: flex-end; }
.cryz-modal-reset { border: 0; background: none; font: 400 12px var(--font-mono); color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cryz-modal-reset:hover { color: var(--link); }

/* Hoverable glossary terms in the hero whisper */
.term {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted var(--leader);
  transition: border-color 0.16s ease, color 0.16s ease;
}
.term:hover { color: var(--link); border-bottom-color: var(--link); }
.term::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--dots);
  border-radius: 12px;
  background: var(--highlight);
  color: var(--text);
  font: 400 12.5px/1.5 var(--font-sans);
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 14px 30px -16px rgba(20, 20, 20, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.18s var(--spring), visibility 0s linear 0.18s;
  z-index: 40;
}
.term::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 16px;
  width: 12px;
  height: 12px;
  background: var(--highlight);
  border-left: 1px solid var(--dots);
  border-top: 1px solid var(--dots);
  transform: rotate(45deg) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.18s var(--spring), visibility 0s linear 0.18s;
  z-index: 41;
}
.term:hover::after, .term:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.18s var(--spring), visibility 0s;
}
.term:hover::before, .term:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) translateY(0);
  transition: opacity 0.16s ease, transform 0.18s var(--spring), visibility 0s;
}
.term:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* ————— UX use-case cards + design screens (case studies) ————— */
.usecase {
  border: 1px solid var(--dots);
  border-radius: 16px;
  background: var(--highlight);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.usecase h3 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; margin: 0 0 14px; letter-spacing: -0.2px; }
.usecase .uc-job { font-style: italic; color: var(--text); margin-bottom: 14px; }
.usecase dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; }
.usecase dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); padding-top: 3px; }
.usecase dd { margin: 0; font-size: 14.5px; line-height: 1.6; }
.screens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.screens figure { margin: 0; }
.screens figure > div {
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--leader);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}
.screens img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--dots); display: block; }
.screens figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
@media (max-width: 640px) { .screens { grid-template-columns: 1fr; } .usecase dl { grid-template-columns: 1fr; gap: 4px; } .usecase dd { margin-bottom: 8px; } }

/* ————— About: sketchnote postcards ————— */
.snaps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: calc(var(--gap) * 3);
  margin-top: 24px;
}
.snap {
  margin: 0;
  background: var(--highlight);
  border-radius: var(--radius-row);
  padding: 10px 10px 12px;
  box-shadow: 0 1px 2px rgba(32,32,44,.06), 0 10px 24px -12px rgba(32,32,44,.18);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s var(--spring), box-shadow .35s var(--spring);
}
.snap:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.015);
  box-shadow: 0 2px 4px rgba(32,32,44,.08), 0 18px 36px -14px rgba(32,32,44,.28);
}
html.cryz-no-tilt .snap { --tilt: 0deg; }
.snap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-image);
  display: block;
  background: var(--background);
}
.snap figcaption {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 10px;
  line-height: 1.45;
}
.snap figcaption a { color: var(--link); text-decoration: none; }
.snap figcaption a:hover { text-decoration: underline; }

/* ————— Work gate ————— */
.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--background);
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate-card {
  width: 100%;
  border: 1px dashed var(--leader);
  border-radius: 14px;
  background: var(--highlight);
  padding: 28px;
  margin: 24px 0 32px;
}
.gate-card h2 { font-size: 22px; margin: 6px 0 10px; letter-spacing: -0.4px; }
.gate-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; }
.gate-card a { color: var(--link); text-decoration: none; }
.gate-form { display: flex; gap: 8px; }
.gate-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--dots);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
}
.gate-form input:focus { outline: 1px solid var(--link); border-color: var(--link); }
.gate-form button {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--text);
  color: var(--background);
  cursor: pointer;
}
.gate-form button:hover { background: var(--link); }
.gate-err { min-height: 18px; margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--link); }
.gate-note { margin: 14px 0 0; font-size: 12px; }
.gate-locked > *:not(.t-contact) { display: none; }
html.work-locked .detail { display: none; }
html.work-locked #work .bento { display: none; }

.cryz-color-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.cryz-color-sel { font: 500 12px var(--font-mono); color: var(--text); background: var(--highlight); border: 1px solid var(--dots); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.cryz-color-sel:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }