/* Iris has a shared vocabulary and a different composition for every story. */

/* Detail bar: brand, Back, crumb, then Selected work, navigator and theme at the right. */
.pj-bar {
  display: flex;
  align-items: center;
  height: var(--bar-h);
  min-height: 0;
  padding: 0 var(--edge);
  gap: var(--s-4);
  background: var(--bar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px);
  box-shadow: none;
}

.pj-brand {
  flex: none;
  gap: 0;
  margin-right: var(--s-2);
}

/* Matches iris.css's <=360px `.iris-brand>span:last-child` hide, so the symbol stays. */
.pj-brand>span.brand-symbol {
  display: inline;
  font-size: 30px;
}

.pj-back {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-3);
  margin-left: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
  font: 400 13px/1 var(--font-body);
  letter-spacing: 0;
  transition: color .2s,background-color .2s;
}

.pj-back:hover,.pj-back:focus-visible {
  background: var(--soft);
  color: var(--accent);
}

.pj-crumb {
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}

.pj-crumb a:hover,.pj-crumb a:focus-visible {
  color: var(--accent);
}

.pj-all {
  flex: none;
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  transition: color .2s;
}

.pj-all:hover,.pj-all:focus-visible {
  color: var(--accent);
}

/* ui.js inserts the navigator as the bar's first child; order moves it beside the theme toggle. */
.pj-bar>.jump-toggle {
  order: 1;
  flex: none;
  margin-left: 0;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 400;
  transition: color .2s,background-color .2s;
}

.pj-bar>.jump-toggle:hover {
  color: var(--accent);
  background: var(--soft);
}

.pj-bar>.theme-toggle {
  order: 2;
  flex: none;
  width: 40px;
  height: 40px;
}

/* kb-overrides button leaks: detail pages follow the iris.css button recipe. */
.button {
  min-height: 0;
}

.button span[aria-hidden] {
  font-size: inherit;
  line-height: inherit;
}

.button:hover span[aria-hidden] {
  transform: none;
}

.button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

.button.secondary:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

:is(.emb,.yb,.oss,.pj,.resume) :is(h1,h2,h3):not(.yb-outlets-label,.oss-kicker,.oss-foot h2) {
  font-weight: 500;
  letter-spacing: -.04em;
}

/* Page openings are set light, like the home hero; document h1s stay medium. */
.emb .emb-title,.yb .yb-title,.wh-hero .pj-title,.oss .oss-title {
  font-weight: 400;
}

:is(.emb,.yb,.pj,.resume-rail,.pj-cta) em {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: var(--track-serif);
}

:is(.emb-inner,.yb-inner,.emb-hero-inner,.yb-hero-inner,.wrap) {
  width: min(var(--content-max),calc(100% - var(--gutter)*2));
}

/* Sticks under the bar; the -1px lets its top rule sit on the bar's rule. */
.chapter-nav {
  position: sticky;
  top: calc(var(--bar-h) - 1px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--s-6);
  padding: var(--s-4) var(--edge);
  border-block: 1px solid var(--line);
  background: var(--paper);
  font-size: 13px;
}

.chapter-nav>span {
  margin-right: auto;
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.chapter-nav a {
  flex: none;
  padding: var(--s-1) 0;
  border-bottom: 1px solid transparent;
  transition: color .2s,border-color .2s;
}

.chapter-nav a:hover,.chapter-nav a.is-current {
  color: var(--accent);
  border-color: var(--accent);
}

/* The one closing band on every detail page. */
.pj-cta {
  background: var(--band);
  color: var(--ink);
  padding-block: var(--section-space-sm);
  text-align: left;
  border-top: 1px solid var(--line);
}

.pj-cta .section-label {
  margin: 0;
  color: var(--muted);
}

.pj-cta h2 {
  max-width: 24ch;
  margin: var(--s-4) 0 0;
  font: 500 var(--t-h2)/var(--lh-heading) var(--font-display);
  letter-spacing: -.04em;
  text-wrap: balance;
  color: var(--ink);
}

.pj-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.pj-cta .button.secondary {
  border-color: var(--line-strong);
}

.pj-cta .button.secondary:hover,.pj-cta .button.secondary:focus-visible {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

/* Embrace: a product showroom, followed by the engineering notes. */

/* Generic project fallback (project.html). */
.pj .pj-hero {
  padding-block: var(--s-7) var(--s-6);
}

.pj .pj-hero .pj-cat {
  margin-bottom: var(--s-4);
}

.pj .pj-hero .pj-title {
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  text-wrap: balance;
}

.pj .pj-tag {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.55;
}

.pj-facts:empty {
  display: none;
}

.pj .pj-facts {
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
}

.pj .pj-facts li {
  font-weight: 500;
}

.pj .pj-facts li span {
  color: var(--muted);
}

.pj .pj-body {
  gap: var(--s-8);
  padding-block: var(--s-6) var(--s-8);
}

.pj .pj-aside {
  top: var(--sticky-top);
  gap: var(--s-5);
}

.pj .pj-side-card {
  padding: var(--s-5);
  border-radius: var(--radius);
  background: var(--paper);
}

.pj .pj-tags li {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: 400 12px/1.5 var(--font-mono);
}

.pj .pj-links a {
  font-weight: 500;
}

.pj .pj-nav {
  padding-block: var(--s-6);
}

.pj .pj-nav a b {
  font-weight: 500;
}

.data-error {
  padding: var(--s-5) 0;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--muted);
}

.emb .emb-specs-grid,.yb .yb-specs-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}

.emb .emb-hero {
  background: var(--bg);
  color: var(--ink);
  padding: 0;
  overflow: visible;
  border: 0;
}

.emb .emb-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  gap: 5%;
  align-items: stretch;
}

.emb-hero-copy {
  padding-block: 28px 36px;
  min-width: 0;
}

.emb .emb-eyebrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  color: var(--muted);
  margin: 0 0 var(--s-6);
}

.emb-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.emb-brand small {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
}

.emb .emb-appicon {
  position: static;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: none;
  border: 0;
  margin: 0;
}

.emb .emb-title {
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  text-wrap: balance;
  margin: var(--s-5) 0;
}

.emb .emb-title em {
  font-size: 1em;
}

.emb .emb-lede {
  font-size: var(--t-lead);
  color: var(--muted);
  line-height: 1.55;
  max-width: 30em;
  margin: 0;
}

.emb .emb-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}

/* The showroom feeds the shared device gallery (showcase.css) its Embrace tint. */
.emb-hero-showroom,.emb-hero-showroom .device-gallery {
  --gallery-bg: #efe9f4;
  --gallery-ink: #5f4a7c;
  --gallery-line: #ddd3e6;
}

:root[data-theme=dark] :is(.emb-hero-showroom,.emb-hero-showroom .device-gallery) {
  --gallery-bg: #24202b;
  --gallery-ink: #c9b8e0;
  --gallery-line: #3b3444;
}

.emb-hero-showroom {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  margin-right: 0;
  background: var(--gallery-bg);
  color: var(--gallery-ink);
}

.emb-brief {
  padding: 26px var(--edge);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.emb .emb-facts {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 35px;
  width: min(var(--content-max),100%);
  margin: 0 auto;
  padding: 0;
  border: 0;
  list-style: none;
}

.emb .emb-facts li {
  font-size: 14px;
  min-width: 0;
}

.emb .emb-facts span {
  display: block;
  margin-bottom: var(--s-2);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.emb .emb-section {
  padding-block: var(--section-space);
}

.emb .emb-kicker {
  margin: 0 0 var(--s-4);
  color: var(--muted);
}

.emb .emb-section h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  max-width: 820px;
  letter-spacing: -.04em;
  margin: 0 0 var(--s-5);
}

.emb .emb-gallery {
  background: var(--bg);
  color: var(--ink);
}

.emb .emb-screens {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-bottom: var(--s-5);
  overflow: visible;
}

.emb .emb-shot:nth-child(even) {
  margin-top: var(--s-6);
}

.emb .emb-shot img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.emb #engineering {
  background: var(--band);
  border-top: 1px solid var(--line);
}

.emb .emb-rebuild {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: 6%;
  max-width: var(--content-max);
  align-items: start;
}

.emb-rebuild .emb-kicker {
  grid-column: 1;
}

.emb .emb-rebuild h2 {
  max-width: 420px;
}

.emb-rebuild-heading,.emb-rebuild-copy {
  min-width: 0;
}

.emb .emb-rebuild-copy>p {
  font-size: var(--t-body);
  color: var(--muted);
  line-height: var(--lh-body);
  max-width: none;
  margin: 0 0 var(--s-4);
}

.emb .emb-modules {
  grid-column: 2;
  margin: var(--s-5) 0 0;
  gap: var(--s-2);
}

.emb .emb-modules li {
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: 12px/1.5 var(--font-mono);
  padding: var(--s-2) var(--s-3);
  color: var(--accent);
  border: 1px solid var(--line);
}

.emb .emb-modules b {
  font-weight: 400;
  color: inherit;
}

.emb .emb-band {
  background: var(--bg);
  border: 0;
}

/* Two columns with the fifth item spanning, so every rule row is complete. */
.emb .emb-features {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 var(--s-6);
  margin-top: var(--s-6);
}

.emb .emb-feat {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
}

.emb .emb-feat:last-child {
  grid-column: 1/-1;
}

.emb .emb-feat-ico {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
}

.emb .emb-feat-ico svg {
  width: 20px;
  height: 20px;
}

.emb .emb-feat h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  letter-spacing: -.03em;
  margin: 0 0 var(--s-3);
}

.emb .emb-feat p {
  font-size: 15px;
  line-height: var(--lh-body);
  max-width: 52ch;
  color: var(--muted);
}

.emb .emb-specs {
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  gap: var(--s-5);
}

.emb .emb-spec dt {
  color: var(--muted);
}

.emb .emb-spec dd {
  font-size: 15px;
  line-height: var(--lh-body);
}

/* Credit strip: in-flow logo and link; .pj-cta below is the closing band. */
.emb .emb-credit {
  padding-block: 0 var(--section-space-sm);
}

.emb .emb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  text-align: left;
  padding: var(--s-6) 0 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line);
}

.emb .emb-foot img {
  width: 140px;
  margin: 0;
}

:root[data-theme=dark] .emb .emb-foot img {
  filter: brightness(0) invert(.92);
}

.emb .emb-foot p {
  flex: 1 1 24em;
  max-width: 44ch;
  margin: 0;
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--muted);
}

/* Yo B: a record sleeve and a playable archive. */

/* Dark plate: same values in both themes, with the dark-band focus ring. */
.yb .yb-hero {
  --focus-ring: var(--dark-band-accent);
  padding: var(--s-6) 0 0;
  background: var(--dark-band);
  color: var(--dark-band-ink);
  border: 0;
}

.yb .yb-hero-inner {
  display: block;
  padding: 0;
  max-width: var(--content-max);
}

.yb-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dark-band-muted);
}

.yb .yb-eyebrow {
  margin: 0;
  color: inherit;
}

.yb-headline {
  display: grid;
  grid-template-columns: minmax(0,1fr) 240px;
  gap: var(--s-6);
  align-items: center;
  padding-block: var(--s-7) var(--s-6);
}

.yb .yb-title {
  display: block;
  text-align: left;
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  text-wrap: balance;
  max-width: none;
  margin: 0;
}

.yb .yb-title em {
  display: block;
  color: var(--dark-band-accent);
  font-size: 1em;
}

/* The record is the identity object: near-black grooves and a teal label. */
.yb-record {
  width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: repeating-radial-gradient(circle,#14201f 0,#14201f 5px,#2f4441 6px,#14201f 7px);
  box-shadow: 0 14px 50px #0000004d;
  transform: rotate(14deg);
}

.yb-record>div {
  width: 48%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 15px;
  border-radius: 50%;
  background: #5fb0a7;
  text-align: center;
  position: relative;
}

.yb-record>div::before {
  content: '';
  position: absolute;
  left: calc(50% - 3px);
  top: 20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14201f;
}

.yb-record img {
  width: 100%;
  margin-top: 5px;
}

.yb-record span {
  font: 500 7px/1.5 var(--font-mono);
  letter-spacing: .01em;
  color: #14201f;
}

.yb-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
}

.yb .yb-lede {
  max-width: 32em;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--dark-band-muted);
  margin: 0;
}

.yb-listen-link {
  font-size: var(--t-small);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--dark-band-ink);
  white-space: nowrap;
  transition: color .2s;
}

.yb-listen-link>span {
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--dark-band-line);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  color: var(--dark-band-accent);
  transition: color .2s,background-color .2s,border-color .2s,transform .4s var(--ease);
}

.yb-listen-link>span svg,.film-play>span svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.yb-listen-link:hover {
  color: var(--dark-band-accent);
}

.yb-listen-link:hover>span {
  background: var(--dark-band-accent);
  border-color: var(--dark-band-accent);
  color: var(--dark-band);
  transform: scale(1.06);
}

.yb .yb-facts {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--dark-band-line);
  max-width: none;
}

.yb .yb-facts li {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--dark-band-ink);
  min-width: 0;
}

.yb .yb-facts span {
  display: block;
  margin-bottom: var(--s-2);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dark-band-muted);
}

.yb .yb-section {
  padding-block: var(--section-space);
}

.yb .yb-section h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: -.04em;
  max-width: 880px;
  margin: 0 0 var(--s-5);
}

.yb .yb-kicker {
  color: var(--muted);
  margin: 0 0 var(--s-4);
}

/* Board strip: the chapter nav below owns the shared rule. */
.yb .yb-board-wrap {
  padding-block: var(--section-space-sm);
  background: var(--band);
  border-bottom: 0;
}

.yb-board-wrap>.yb-inner {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 0 5%;
}

.yb-board-wrap .yb-kicker,.yb-board-wrap h2,.yb-board-note {
  grid-column: 1;
}

.yb .yb-board-wrap h2 {
  font: 500 var(--t-h3)/var(--lh-heading) var(--font-display);
  letter-spacing: -.03em;
  margin: 0;
}

.yb .yb-board-note {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: var(--s-3) 0 0;
}

.yb .yb-board {
  grid-column: 2;
  grid-row: 1/5;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin: 0;
  counter-reset: clips;
}

.yb .yb-clip {
  counter-increment: clips;
  border: 1px solid var(--line);
  padding: var(--s-4);
  display: grid;
  grid-template-areas: none;
  grid-template-columns: 25px 1fr;
  gap: var(--s-3);
  min-height: 81px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: color .2s,background-color .2s,border-color .2s,transform .4s var(--ease);
}

.yb .yb-clip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

.yb .yb-clip:hover,.yb .yb-clip.is-playing {
  box-shadow: none;
}

.yb .yb-clip.is-playing .yb-clip-viz {
  background: var(--accent);
  color: var(--accent-ink);
}

.yb .yb-clip::after {
  content: counter(clips,decimal-leading-zero);
  position: absolute;
  right: 8px;
  bottom: 3px;
  font: 9px var(--font-mono);
  color: var(--muted);
}

.yb .yb-clip-viz {
  grid-area: auto;
  width: 25px;
  height: 25px;
  background: var(--soft);
  color: var(--accent);
  border-radius: 50%;
}

.yb .yb-clip-viz svg {
  width: 12px;
  height: 12px;
}

.yb .yb-clip-label {
  grid-area: auto;
  align-self: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  min-width: 0;
  color: inherit;
}

.yb .yb-clip.is-primary .yb-clip-label,.yb .yb-clip.is-playing .yb-clip-label {
  color: inherit;
}

.yb .yb-clip-wave {
  grid-area: auto;
  grid-column: 1/-1;
  height: 10px;
  position: absolute;
  bottom: 4px;
  left: 15px;
  right: 25px;
  justify-content: start;
  opacity: .45;
  pointer-events: none;
}

.yb .yb-clip-wave i {
  background: var(--accent);
  width: 2px;
}

.yb .yb-clip:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  background: var(--paper);
}

.yb .yb-clip.is-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.yb .yb-clip.is-primary::after {
  color: inherit;
  opacity: .6;
}

.yb .yb-clip.is-playing {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.yb .yb-clip.is-playing::after {
  color: var(--bg);
}

.yb .yb-board-legal {
  grid-column: 2;
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: var(--s-4) 0 0;
}

.yb .yb-idea {
  grid-template-columns: 1fr 1fr;
  gap: 12%;
}

.yb .yb-idea-copy p:not(.yb-kicker) {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

.yb .yb-tweet-cap {
  margin: 0 0 var(--s-3);
  color: var(--muted);
}

.yb .yb-tweet {
  background: var(--paper);
  border-color: var(--line);
  padding: var(--s-6);
  box-shadow: 10px 10px 0 var(--soft);
  border-radius: var(--radius);
}

.yb .yb-tweet-body {
  font: 400 18px/1.55 var(--font-body);
}

.yb .yb-band--dark {
  background: var(--band);
  color: var(--ink);
}

.yb .yb-shots {
  gap: var(--s-5);
  margin-top: var(--s-6);
  align-items: start;
}

.yb .yb-shot {
  flex: 1;
  min-width: 0;
}

.yb .yb-shot img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.yb .yb-shot:nth-child(even) {
  padding-top: var(--s-7);
}

.yb .yb-shot figcaption {
  margin-top: var(--s-4);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.yb .yb-video:only-child {
  width: 100%;
  max-width: none;
}

.yb .yb-video-frame {
  max-width: none;
  border-radius: var(--radius-lg);
  background: var(--dark-band);
}

/* Video poster: a dark plate; the ring sits inside because the frame clips. */
.yb-video-poster {
  --focus-ring: var(--dark-band-accent);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--dark-band);
  color: var(--dark-band-ink);
  border: 0;
  padding: clamp(24px,5vw,64px);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  overflow: hidden;
}

.yb-video-poster:focus-visible {
  outline-offset: -8px;
}

.yb-video-poster::after {
  content: '“';
  position: absolute;
  right: 6%;
  top: -12%;
  font: clamp(280px,40vw,600px) var(--font-serif);
  color: color-mix(in srgb,var(--dark-band-ink) 4%,transparent);
  pointer-events: none;
}

.film-label {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dark-band-muted);
}

.film-title {
  font: 400 var(--t-h1)/var(--lh-tight) var(--font-display);
  letter-spacing: -.055em;
  z-index: 1;
}

.film-title em {
  font-family: var(--font-serif);
  color: var(--dark-band-accent);
}

.film-play {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-small);
}

.film-play>span {
  border: 1px solid var(--dark-band-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--dark-band-accent);
  transition: color .2s,background-color .2s,border-color .2s;
}

.yb-video-poster:hover .film-play>span {
  background: var(--dark-band-accent);
  border-color: var(--dark-band-accent);
  color: var(--dark-band);
}

.yb .yb-video figcaption a {
  display: inline-block;
  color: var(--accent);
  margin-left: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yb .yb-specs {
  box-shadow: none;
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--s-6);
  border: 1px solid var(--line);
}

.yb .yb-specs-head {
  margin-bottom: 0;
}

.yb .yb-spec dt {
  color: var(--muted);
}

.yb .yb-spec dd {
  font-size: 15px;
  line-height: var(--lh-body);
}

.yb .yb-watch-play {
  color: var(--accent-ink);
}

.yb .yb-specs h3 {
  font-size: 22px;
}

.yb .yb-specs li {
  font-size: 15px;
}

/* Real column gutters: every cell carries its own row rule, none pulled short. */
.yb .yb-press-grid {
  display: grid;
  gap: 0 var(--s-5);
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid var(--line);
}

.yb .yb-press-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: var(--s-5) 0;
  box-shadow: none;
  transition: color .2s,background-color .2s;
}

.yb-press-tag {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  color: var(--muted);
  text-transform: uppercase;
}

.yb-press-name {
  font: 500 24px/1.2 var(--font-display);
  letter-spacing: -.03em;
}

.yb-press-sub {
  font-size: 13px;
  color: var(--muted);
}

.yb .yb-press-link.is-feature {
  grid-column: span 2;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--s-5);
  margin-right: 0;
}

.yb .yb-press-link.is-feature .yb-press-tag,.yb .yb-press-link.is-feature .yb-press-sub {
  color: inherit;
}

.yb .yb-press-link.is-feature .yb-press-name {
  font: italic 40px var(--font-serif);
}

.yb .yb-press-link.is-feature:hover {
  background: var(--ink);
  color: var(--bg);
}

.yb .yb-press-link:hover {
  background: transparent;
  color: var(--accent);
  transform: none;
}

.yb .yb-press-outlets {
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-5);
  font-size: 13px;
}

/* Open source: a quiet navigation rail beside a working technical notebook. */

.oss {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  gap: var(--s-7);
  width: min(var(--content-max),calc(100% - var(--gutter)*2));
  margin: 0 auto;
  padding: var(--s-7) 0 var(--s-8);
  --oss-accent-text: var(--accent);
}

.oss-index {
  position: sticky;
  top: var(--sticky-top);
  height: fit-content;
  align-self: start;
  padding-top: 0;
}

/* The rail's first row and the notebook's file label share one height, so both rules sit on one line. */
.oss-index-home,.oss-file-label {
  display: flex;
  align-items: flex-end;
  min-height: 40px;
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.oss-index-home {
  gap: var(--s-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  transition: color var(--t-fast);
}

.oss-index-home:hover {
  color: var(--accent);
}

.oss-file-label,.oss-index .eyebrow {
  color: var(--muted);
}

.oss-index nav {
  display: grid;
  margin-top: var(--s-4);
}

.oss-index-note {
  margin-top: var(--s-7);
  color: var(--muted);
  font-size: 13px;
}

.oss-index-note>span {
  display: block;
  margin-bottom: var(--s-4);
  font: 42px/1 var(--font-mono);
  letter-spacing: -.1em;
  color: var(--accent);
}

.oss-workspace {
  min-width: 0;
}

.oss[data-unavailable] .oss-index nav,
.oss[data-unavailable] .oss-file-label,
.oss[data-unavailable] .oss-mark,
.oss[data-unavailable] .oss-repo-line {
  display: none;
}

.oss .oss-inner,.oss .oss-hero-inner {
  width: 100%;
  padding: 0;
}

.oss .oss-hero {
  background: none;
  border: 0;
  padding: 0 0 var(--s-6);
  overflow: visible;
}

.oss .oss-mark {
  position: static;
  width: 56px;
  height: 56px;
  float: right;
  margin: 0 0 0 var(--s-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--soft);
}

.oss .oss-monogram {
  font-size: 27px;
  font-weight: 500;
  color: var(--accent);
}

.oss .oss-repo-line {
  font-size: 12px;
  min-height: 24px;
  overflow-wrap: anywhere;
}

.oss .oss-hero .oss-title {
  margin: var(--s-4) 0 var(--s-5);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.oss .oss-tagline {
  max-width: 720px;
  font: italic 400 22px/1.45 var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--ink);
}

.oss .oss-pills {
  margin-top: var(--s-5);
  gap: var(--s-2);
}

.oss .oss-pill {
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font: 400 12px/1.5 var(--font-mono);
}

.oss .oss-cta {
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.oss .oss-section {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}

.oss .oss-pulse-section {
  border-top: 0;
  padding: 0 0 var(--s-6);
}

.oss .oss-pulse {
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.oss .oss-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
}

.oss .oss-stat-val {
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
}

.oss .oss-stat-label,.oss .oss-side-label {
  color: var(--muted);
}

.oss .oss-side-label {
  margin-bottom: var(--s-2);
}

.oss .oss-legend b {
  font-weight: 500;
}

.oss .oss-pulse-side {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-left: 0;
  border-top: 1px solid var(--line);
}

.oss .oss-commits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
  font-size: 13px;
}

.oss .oss-commits>li {
  min-width: 0;
}

.oss .oss-commit-meta a:hover {
  color: var(--accent);
}

.oss .oss-section .oss-kicker {
  margin-bottom: var(--s-4);
  color: var(--accent);
}

.oss .oss-overview,.oss .oss-overview p {
  max-width: none;
  font-size: var(--t-lead);
  line-height: 1.55;
}

.oss .oss-hl-list {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-5);
}

.oss .oss-hl {
  padding: var(--s-4) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.oss .oss-hl-list .oss-hl h3 {
  margin-bottom: var(--s-3);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
}

.oss .oss-hl p {
  font-size: 15px;
  line-height: 1.6;
}

.oss .oss-modules {
  gap: var(--s-4);
}

.oss .oss-mod {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.oss .oss-mod-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}

.oss .oss-mod-purpose {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.oss .oss-mod-bullets {
  font-size: 14px;
}

.oss .oss-docs-grid {
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

/* The install block is a dark plate: same values in both themes, with its own focus ring. */
.oss .oss-code {
  --focus-ring: var(--dark-band-accent);
  --code-head: color-mix(in srgb,var(--dark-band-ink) 6%,var(--dark-band));
  /* Control hairline: 3.4:1 or better against the head in both themes. */
  --code-line: color-mix(in srgb,var(--dark-band-muted) 65%,var(--dark-band));
  border: 1px solid var(--dark-band-line);
  border-radius: var(--radius);
  background: var(--dark-band);
  color: var(--dark-band-ink);
}

.oss .oss-code-head {
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--dark-band-line);
  background: var(--code-head);
  color: var(--dark-band-muted);
}

.oss .oss-dots i {
  background: var(--dark-band-line);
}

.oss .oss-code-label {
  color: var(--dark-band-muted);
}

.oss .oss-copy {
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--code-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--dark-band-ink);
  font: 500 12px/1 var(--font-body);
  transition: color var(--t-fast),border-color var(--t-fast),background-color var(--t-fast);
}

.oss .oss-copy:hover {
  border-color: var(--dark-band-accent);
  background: transparent;
  color: var(--dark-band-accent);
}

.oss .oss-copy.is-copied {
  border-color: var(--dark-band-accent);
  background: var(--dark-band-accent);
  color: var(--dark-band);
}

.oss .oss-code-body {
  max-width: 100%;
  overflow: auto;
  padding: var(--s-5);
  color: var(--dark-band-ink);
  font: 13px/1.7 var(--font-mono);
  tab-size: 2;
}

.oss .oss-code-body .ln-comment {
  color: var(--dark-band-muted);
}

/* The plate clips overflow, so the scroller's ring sits inside it. */
.oss .oss-code-body:focus-visible {
  outline-offset: -4px;
}

.oss .oss-docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
}

.oss .oss-doc-label {
  font-weight: 500;
}

.oss .oss-doc-d {
  font-size: 14px;
}

/* The closing band follows the notebook grid; only the open-source band carries a line of copy. */
.oss-cta-band h2+p {
  max-width: 60ch;
  margin: var(--s-5) 0 0;
  color: var(--muted);
}


/* Career: a dated ledger, with context in the margin. */

.wh-hero {
  display: flex;
  justify-content: space-between;
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-7) var(--s-6);
  border-bottom: 1px solid var(--line);
}

.wh-hero .pj-cat {
  margin-bottom: 0;
}

.pj .wh-hero .pj-title {
  max-width: none;
  margin: var(--s-4) 0 0;
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
}

.pj .wh-hero .pj-title em {
  font-size: 1em;
}

.wh-hero-note {
  min-width: 200px;
  font-size: 13px;
  color: var(--muted);
}

.wh-monogram {
  display: block;
  margin-bottom: var(--s-3);
  font: italic 400 80px/1 var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--accent);
}

.wh-monogram>span {
  font-size: .5em;
  vertical-align: top;
  line-height: 1.5;
}

.wh-hero-note .text-link {
  margin-top: var(--s-3);
}

.career-layout {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  gap: var(--s-7);
  padding-block: var(--s-7) var(--s-8);
}

.career-margin {
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
  font-size: 16px;
}

.career-margin .eyebrow {
  margin-bottom: var(--s-4);
  color: var(--accent);
}

.career-margin>p:not(.eyebrow) {
  color: var(--muted);
}

.career-margin .career-note {
  margin-top: var(--s-4);
  font-size: 13px;
}

.career-margin nav {
  display: grid;
  margin-top: var(--s-5);
}

.career-margin-mark {
  display: block;
  margin-top: var(--s-6);
  font: italic 400 60px/1 var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--accent);
}

.career-layout .wh-timeline {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.career-layout .wh-timeline::before,.career-layout .wh-node {
  display: none;
}

.career-layout .wh-item {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr);
  gap: var(--s-5);
  margin: 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}

.career-layout .wh-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.career-layout .wh-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.career-layout .wh-meta {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  padding: 0;
}

.career-layout .wh-when {
  font: 12px/1.5 var(--font-mono);
  color: var(--accent);
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
}

.career-layout .wh-loc {
  max-width: 135px;
  margin-top: var(--s-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.pj .career-layout .wh-role {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -.03em;
}

.career-layout .wh-co {
  display: block;
  margin-top: var(--s-1);
  font: italic 400 1em/var(--lh-heading) var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--muted);
}

.career-layout .wh-bullets {
  gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--muted);
}

.career-layout .wh-bullets li {
  font-size: 15px;
  line-height: 1.6;
}

.career-layout .wh-bullets li::before {
  background: var(--accent);
  width: 3px;
  height: 3px;
  top: 12px;
}

.career-layout .wh-tech {
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.career-layout .wh-tech li {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: 400 12px/1.5 var(--font-mono);
}

/* Résumé: the controls stay outside the document. */

@media screen {
  .resume-studio {
    display: grid;
    grid-template-columns: 200px minmax(0,1fr);
    gap: var(--s-7);
    padding-block: var(--s-7) var(--s-8);
    align-items: start;
  }
  .resume-rail {
    position: sticky;
    top: var(--sticky-top);
  }
  .resume-rail>.eyebrow {
    color: var(--muted);
  }
  .resume-rail h2 {
    margin-block: var(--s-4) var(--s-5);
    font-size: 34px;
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: -.04em;
  }
  .resume-rail>p:not(.eyebrow) {
    font-size: 14px;
    color: var(--muted);
  }
  .resume-rail .resume-downloads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-block: var(--s-5);
    padding: 0;
    border: 0;
  }
  .resume-rail .resume-dl-label {
    grid-column: 1/-1;
    margin-bottom: var(--s-1);
    color: var(--muted);
  }
  /* Export controls are shared .button.small buttons; these rules only place them. */
  .resume-rail .dl-btn {
    width: 100%;
  }
  .resume-rail .dl-btn[data-download=pdf] {
    grid-column: 1/-1;
  }
  .resume-rail .dl-btn.primary:hover,.resume-rail .dl-btn.primary:focus-visible {
    color: var(--accent-ink);
  }
  .resume-rail .dl-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .resume-rail nav {
    display: grid;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }
  .resume-rail>.text-link {
    margin-top: var(--s-5);
  }
  .resume-studio .resume {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--s-6) clamp(24px,3.4vw,48px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--accent);
    box-shadow: var(--shadow);
  }
  .resume .resume-head {
    padding: 0 0 var(--s-5);
    border-bottom: 1px solid var(--line);
  }
  .resume .resume-head>.section-label {
    display: none;
  }
  .resume .resume-head h1 {
    font: 500 clamp(38px,4vw,56px)/1.1 var(--font-display);
    letter-spacing: -.055em;
    max-width: none;
  }
  .resume .resume-headline {
    margin-top: var(--s-3);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--accent);
  }
  /* Each dot belongs to the item after it and is clipped at a line start, so none orphan. */
  .resume .resume-contact {
    gap: var(--s-2) 18px;
    margin: var(--s-4) -4px 0;
    padding: 4px;
    overflow: hidden;
    font-size: 12px;
    color: var(--muted);
  }
  .resume .resume-contact .sep {
    display: none;
  }
  .resume .resume-contact>:not(.sep) {
    position: relative;
  }
  .resume .resume-contact>:not(.sep)::before {
    content: "·";
    content: "·" / "";
    position: absolute;
    right: calc(100% + 7px);
    color: var(--muted);
  }
  .resume .resume-contact a:focus-visible {
    outline-offset: 2px;
  }
  .resume .resume-section {
    padding-top: var(--s-5);
  }
  .resume .resume-section>h2,.resume .resume-section-head h2 {
    margin-bottom: var(--s-4);
    color: var(--accent);
  }
  .resume .resume-section-head {
    align-items: start;
    gap: var(--s-3);
    margin-bottom: 0;
  }
  .resume .resume-history-link {
    color: var(--muted);
  }
  .resume .resume-history-link:hover {
    color: var(--accent);
  }
  .resume .resume-lead {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
  }
  .resume .resume-strengths {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4) var(--s-5);
    margin: 0;
    border-top: 0;
    font-size: 14px;
    line-height: 1.6;
  }
  .resume .resume-strengths li {
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--muted);
  }
  .resume .resume-strengths li::before {
    display: none;
  }
  .resume .resume-jobs {
    gap: var(--s-4);
  }
  .resume .resume-job {
    display: block;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
  }
  .resume .resume-job .when {
    margin-bottom: var(--s-2);
    font: 12px/1.5 var(--font-mono);
    letter-spacing: 0;
    color: var(--muted);
  }
  .resume .resume-jobs .resume-job h3 {
    font-size: var(--t-h4);
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: -.02em;
  }
  .resume .resume-job .resume-where {
    margin-block: var(--s-1) var(--s-3);
    font-size: 13px;
    color: var(--accent);
  }
  .resume .resume-bullets {
    gap: var(--s-2);
    color: var(--muted);
  }
  .resume .resume-bullets li {
    font-size: 14px;
    line-height: 1.6;
  }
  .resume .rs-skill-group {
    margin-bottom: var(--s-5);
  }
  .resume .resume-section .rs-skill-group h3 {
    margin-bottom: var(--s-2);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }
  .resume .rs-skill-list {
    gap: var(--s-2);
  }
  .resume .rs-skill {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
  }
  .resume .rs-skill.is-expert {
    border-color: var(--accent-soft);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
  }
  .resume .resume-edu-row {
    gap: var(--s-2) var(--s-4);
    align-items: start;
    padding-block: var(--s-4);
    font-size: 13px;
  }
  .resume .resume-edu-row .yr {
    font-weight: 400;
    color: var(--muted);
  }
}

@media(min-width:1700px) {
  .emb-hero-showroom {
    margin-right: 0;
  }
}

@media(max-width:1100px) {
  .emb .emb-specs-grid,.yb .yb-specs-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .emb-hero-showroom {
    min-height: 620px;
  }
  .emb .emb-facts {
    gap: var(--s-5);
  }
  .yb-headline {
    grid-template-columns: 1fr 210px;
    gap: var(--s-5);
  }
  .yb-record {
    width: 210px;
  }
  .yb-record span {
    font-size: 6px;
  }
  .yb-record>div {
    padding: 10px;
  }
  .yb-record>div::before {
    top: 10px;
  }
  .yb-board-wrap>.yb-inner {
    grid-template-columns: 210px 1fr;
    gap: 0 var(--s-6);
  }
  .yb .yb-board {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .yb .yb-board-wrap h2 {
    font-size: 36px;
  }
  .oss {
    grid-template-columns: 180px minmax(0,1fr);
    gap: var(--s-6);
  }
  .oss .oss-stats {
    gap: var(--s-4) var(--s-5);
  }
  .oss .oss-hl-list,.oss .oss-modules {
    grid-template-columns: 1fr;
  }
  .oss .oss-commits {
    grid-template-columns: 1fr;
  }
  .wh-hero {
    gap: var(--s-6);
  }
  .career-layout {
    grid-template-columns: 180px minmax(0,1fr);
    gap: var(--s-6);
  }
  .career-layout .wh-item {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .career-layout .wh-meta {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .career-layout .wh-loc {
    max-width: none;
    margin: 0;
  }
  .career-layout .wh-main {
    grid-column: 1;
    grid-row: 2;
  }
  .resume-studio {
    grid-template-columns: 200px minmax(0,1fr);
    gap: var(--s-6);
  }
  .resume-rail h2 {
    font-size: 32px;
  }
  .resume-studio .resume {
    padding: var(--s-6);
  }
  .resume .resume-strengths {
    grid-template-columns: 1fr;
  }
}

/* Screenshot strips scroll once five tiles would drop below 200px. */
@media(max-width:1000px) {
  .emb .emb-screens,.yb .yb-shots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--s-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0 var(--s-5);
  }
  .emb .emb-shot,.yb .yb-shot {
    flex: 0 0 clamp(200px,30vw,240px);
    max-width: none;
    scroll-snap-align: start;
  }
  .emb .emb-shot:nth-child(even) {
    margin-top: 0;
  }
  .yb .yb-shot:nth-child(even) {
    padding-top: 0;
  }
}

/* The Embrace hero stacks before two columns squeeze the title. */
@media(max-width:900px) {
  .emb .emb-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .emb-hero-showroom {
    margin-inline: calc(-1 * var(--gutter));
  }
}

@media(max-width:760px) {
  .pj .pj-hero {
    padding-block: var(--s-6) var(--s-5);
  }
  .emb .emb-specs-grid,.yb .yb-specs-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .pj-bar {
    gap: var(--s-3);
  }
  .pj-crumb {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pj-all {
    display: none;
  }
  .pj-bar>.jump-toggle {
    display: flex;
    width: 40px;
    padding: 0;
  }
  .pj-bar .jump-key {
    display: none;
  }
  .chapter-nav {
    justify-content: start;
    gap: var(--s-5);
    padding-block: var(--s-3);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chapter-nav>span {
    display: none;
  }
  .emb-hero-copy {
    padding-block: var(--s-6) var(--s-7);
  }
  .emb-brand {
    font-size: 17px;
  }
  .emb .emb-facts {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
  /* Strips bleed to the viewport edge; the first tile still starts on the gutter. */
  .emb .emb-screens,.yb .yb-shots {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .emb .emb-rebuild {
    display: block;
  }
  .emb .emb-features {
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
  }
  .emb .emb-specs {
    grid-template-columns: 1fr;
    padding: var(--s-5);
  }
  .yb .yb-hero {
    padding-top: var(--s-5);
  }
  .yb-edition {
    align-items: start;
  }
  .yb .yb-eyebrow {
    max-width: 170px;
  }
  .yb-headline {
    display: block;
    position: relative;
    padding-block: var(--s-8) var(--s-6);
  }
  .yb .yb-title {
    position: relative;
    z-index: 1;
  }
  .yb-record {
    position: absolute;
    right: -5px;
    top: 36px;
    width: 140px;
    opacity: .6;
    z-index: 0;
  }
  .yb-record>div {
    padding: 9px;
  }
  .yb-record span {
    display: none;
  }
  .yb-record>div::before {
    top: 8px;
    width: 4px;
    height: 4px;
    left: calc(50% - 2px);
  }
  .yb-hero-bottom {
    display: block;
    padding-bottom: var(--s-6);
  }
  .yb-listen-link {
    margin-top: var(--s-5);
  }
  .yb-listen-link>span {
    width: 48px;
    height: 48px;
  }
  .yb .yb-facts {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
    padding-block: var(--s-5);
  }
  .yb-board-wrap>.yb-inner {
    display: block;
  }
  .yb .yb-board-note {
    max-width: 400px;
  }
  .yb .yb-board {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--s-3);
    margin-top: var(--s-5);
  }
  .yb .yb-clip {
    padding: var(--s-3);
    min-height: 88px;
    gap: var(--s-2);
    grid-template-columns: 22px 1fr;
  }
  .yb .yb-clip-viz {
    width: 22px;
    height: 22px;
  }
  .yb .yb-idea {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .yb .yb-tweet {
    padding: var(--s-5);
    box-shadow: 6px 6px 0 var(--soft);
  }
  .yb .yb-specs {
    grid-template-columns: 1fr;
    padding: var(--s-5);
  }
  .yb .yb-press-grid {
    grid-template-columns: 1fr 1fr;
  }
  .yb .yb-press-link {
    padding: 20px 15px 20px 0;
  }
  .yb .yb-press-link-name {
    font-size: 20px;
  }
  .oss {
    display: block;
    padding-block: var(--s-6) var(--s-7);
  }
  .oss-index {
    position: static;
    padding: 0;
  }
  .oss-index-home {
    min-height: 0;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .oss-index>.eyebrow,.oss-index-note {
    display: none;
  }
  .oss-index nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-6);
  }
  .oss-file-label {
    display: none;
  }
  .oss .oss-mark {
    width: 48px;
    height: 48px;
  }
  .oss .oss-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--s-5) var(--s-4);
  }
  .oss .oss-stat-val {
    font-size: clamp(22px,6.6vw,27px);
  }
  .oss .oss-hl-list,.oss .oss-modules,.oss .oss-docs {
    grid-template-columns: 1fr;
  }
  .oss .oss-hl-list {
    gap: 0;
  }
  .oss .oss-code-head {
    padding: var(--s-3) var(--s-4);
  }
  .oss .oss-code-body {
    padding: var(--s-4);
    font-size: 12px;
  }
  .wh-hero {
    display: block;
    padding-block: var(--s-6);
  }
  .wh-hero-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
    margin-top: var(--s-5);
  }
  .wh-monogram {
    margin: 0;
    font-size: 60px;
  }
  .wh-hero-note .text-link {
    margin: 0;
  }
  .career-layout {
    display: block;
    padding-block: var(--s-6) var(--s-7);
  }
  .career-margin {
    position: static;
    margin-bottom: var(--s-6);
  }
  .career-margin>p:not(.eyebrow) {
    max-width: 450px;
    font-size: 14px;
  }
  .career-margin .career-note {
    margin-top: var(--s-3);
  }
  .career-margin nav,.career-margin-mark {
    display: none;
  }
  .career-layout .wh-item {
    gap: var(--s-3);
  }
  .career-layout .wh-item:first-child {
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }
  .career-layout .wh-meta {
    display: block;
  }
  .career-layout .wh-loc {
    max-width: none;
    margin-top: var(--s-1);
  }
  .resume-studio {
    display: block;
    padding-block: var(--s-6) var(--s-7);
  }
  .resume-rail {
    position: static;
  }
  .resume-rail h2 {
    font-size: 36px;
  }
  .resume-rail h2 br {
    display: none;
  }
  .resume-rail>p:not(.eyebrow) {
    max-width: 410px;
  }
  .resume-rail .resume-downloads {
    display: flex;
    flex-wrap: wrap;
  }
  .resume-rail .resume-dl-label {
    width: 100%;
  }
  .resume-rail .dl-btn {
    width: auto;
  }
  .resume-rail nav,.resume-rail>.text-link {
    display: none;
  }
  .resume-studio .resume {
    padding: var(--s-5) var(--s-4);
  }
  .resume .resume-head h1 {
    font-size: 39px;
  }
  .resume .resume-headline {
    font-size: 15px;
  }
  .resume .resume-edu-row {
    display: grid;
  }
  .resume .resume-history-link {
    margin: 0 0 var(--s-4);
  }

}

@media(max-width:760px) {
  .yb .yb-video-frame {
    aspect-ratio: 16/10;
  }
  .yb-video-poster {
    padding: var(--s-5);
  }
  .film-title {
    font-size: clamp(32px,8vw,44px);
  }
  .film-play>span {
    width: 40px;
    height: 40px;
  }
  .yb .yb-press-name {
    font-size: 21px;
  }
  .yb .yb-press-link.is-feature .yb-press-name {
    font-size: 34px;
  }
}

/* Phones keep brand, Back, navigator and theme; the crumb gives way. */
@media(max-width:560px) {
  .pj-crumb {
    display: none;
  }
  .pj-back {
    margin-right: auto;
  }
}

@media(max-width:360px) {
  .yb-record {
    width: 120px;
    right: -10px;
  }
  .yb .yb-board {
    gap: 8px;
  }
  .yb .yb-clip {
    padding: 10px;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .yb .yb-clip-label {
    font-size: 12px;
  }
  .yb .yb-press-grid {
    grid-template-columns: 1fr;
  }
  .yb .yb-press-link.is-feature {
    grid-column: 1;
  }
  .resume .resume-head h1 {
    font-size: 34px;
  }
}

@media print {
  :root,:root[data-theme] {
    color-scheme: light!important;
    --bg: #fff;
    --paper: #fff;
    --ink: #111;
    --muted: #444;
    --line: #ccc;
    --line-soft: #ccc;
    --soft: #fff;
    --accent: #111;
    --accent-soft: transparent;
  }
  html,body {
    background: #fff!important;
    color: #111;
  }
  .pj-bar,.iris-footer,.pj-cta,.skip-link,.resume-rail,.resume-downloads,.chapter-nav,.reading-progress,.jump-dialog,.jump-toggle {
    display: none!important;
  }
  .resume-studio {
    display: block;
    padding: 0;
    max-width: none;
    margin: 0;
  }
  .resume-studio .resume {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
    color: #111;
  }
  .resume .resume-head h1 {
    font: 500 30pt/1.1 Satoshi,Arial,sans-serif;
    letter-spacing: -.04em;
  }
  .resume .resume-headline {
    font-size: 12pt;
  }
  .resume .resume-head>.section-label {
    display: none;
  }
  .resume :is(h1,h2,h3,p,li,a,span) {
    color: #111!important;
  }
  .resume .resume-head,.resume .resume-job,.resume .resume-strengths li,.resume .resume-edu-row {
    border-color: #ccc;
  }
  .resume .resume-bullets,.resume .resume-bullets li {
    font-size: 9pt;
    line-height: 1.5;
  }
  .resume .resume-jobs .resume-job h3 {
    font-size: 11pt;
  }
  .resume .resume-contact {
    font-size: 9pt;
  }
  .resume .resume-section {
    break-inside: auto;
  }
  .resume #resume-skills {
    break-inside: avoid;
  }
  .resume .resume-strengths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    font-size: 9pt;
    line-height: 1.45;
  }
  .resume .resume-strengths li {
    padding: 8px 0;
  }
  .resume .resume-job {
    display: grid;
    grid-template-columns: 95px minmax(0,1fr);
    gap: 18px;
    break-inside: avoid;
  }
  .resume .resume-job .when {
    font-size: 9pt;
    font-weight: 400;
  }
  .resume .rs-skill,.resume .rs-skill.is-expert {
    background: none;
    border-color: #ccc;
  }
}

/* One label recipe for every eyebrow, kicker, and small caption across pages. */

.eyebrow,.section-label,.iris-home .work-heading,
.emb .emb-eyebrow,.emb .emb-kicker,.emb-rebuild .emb-kicker,.emb .emb-spec dt,
.yb .yb-eyebrow,.yb .yb-kicker,.yb .yb-idea-copy .yb-kicker,.yb .yb-spec dt,.yb .yb-tweet-cap,.yb .yb-outlets-label,
.chapter-nav>span,
.oss .oss-section .oss-kicker,.oss-file-label,.oss-index .eyebrow,.oss .oss-side-label,.oss .oss-stat-label,.oss .oss-code-label,
.resume-rail>.eyebrow,main.resume .resume-section>h2,main.resume .resume-section-head h2,.resume .resume-dl-label,
.wh-hero .pj-cat,.career-margin .eyebrow,
.pj .pj-facts li span,.pj .pj-nav a span,.pj .pj-aside .pj-side-card h3 {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.pj-all,.resume .resume-history-link {
  font: 400 13px/1.5 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.resume-rail .dl-btn,.pj-crumb,.oss .oss-copy,.resume .resume-where {
  font-weight: 500;
}

/* One link style for the open-source, career, and résumé rails. */
.oss-index nav a,.career-margin nav a,.resume-rail nav a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  border-left: 1px solid var(--line);
  font: 400 13px/1.5 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  transition: color var(--t-fast),border-color var(--t-fast);
}

.oss-index nav a:hover,.oss-index nav a.is-current,
.career-margin nav a:hover,.resume-rail nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media(max-width:760px) {
  .oss-index nav a {
    padding: 4px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
  }
}

/* Editorial highlights share the site's supporting palette. */
.emb-title em { color: var(--violet); }
.yb-title em { color: var(--teal); }
.wh-hero .pj-title em { color: var(--violet); }
.resume-rail h2 em { color: var(--teal); }