/* Real photographs and source material. The gallery supplies the movement. */
.work .project-panel .project-cover { container-type: size; isolation: isolate; transform: none !important; background: #0c1420; }
.work .project-panel.is-active::after { content: none; }
.work .project-cover::after { content: none; }
.work .project-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.work .taxi-photo { object-position: 50% 69%; }
.work .singapore-photo { object-position: 50% 65%; }
.work .cover-location { position: absolute; left: 28px; right: 28px; bottom: 23px; z-index: 1; display: flex; justify-content: space-between; gap: 16px; color: #fff; font-size: 15px; line-height: 1.5; text-shadow: 0 1px 8px #0008; }
.work .cover-location > span { font-size: 12px; align-self: center; }
.work .art-taxi::before, .work .art-swift::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #0005, transparent 30%, transparent 64%, #0008); }
.work .experiment-cover, .work .code-cover { height: 100%; padding: 29px 36px 22px; color: #233243; }
.work .experiment-cover { background: #e6e6df; }
.work .cover-kicker { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 19px; padding-left: 43px; font-size: 11px; line-height: 1.6; letter-spacing: .015em; }
.work .cover-kicker > span { color: #566474; }
.work .experiment-cover h4, .work .code-cover h4 { font-size: clamp(24px, 3.5cqw, 43px); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; margin: 0 0 22px; }
.work .experiment-rows { border-top: 1px solid #52657655; }
.work .experiment-rows > div { display: grid; grid-template-columns: 29px 1fr 1.35fr; align-items: baseline; gap: 13px; padding: 11px 0; border-bottom: 1px solid #52657635; }
.work .experiment-rows span { font-size: 11px; color: #60717b; }
.work .experiment-rows strong { font-size: clamp(15px, 1.9cqw, 22px); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.work .experiment-rows small { font-size: clamp(11px, 1.4cqw, 15px); line-height: 1.5; color: #536372; }
.work .experiment-constraint { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #536372; }
.work .project-panel[data-project='agent-tax'] .panel-number { color: #243648; }
.work .code-cover { color: #e1e8f1; background: #111d2c; }
.work .code-cover .cover-kicker { color: #bfcbdb; }
.work .code-cover .cover-kicker > span { color: #92a5bd; }
.work .code-cover h4 { margin-bottom: 14px; }
.work .code-file { margin: 0 0 13px; color: #97aac3; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.work .code-cover pre { margin: 0; padding: 12px 0; border-top: 1px solid #728ca33c; border-bottom: 1px solid #728ca33c; font: clamp(11px, 1.4cqw, 15px)/1.85 ui-monospace, SFMono-Regular, Consolas, monospace; color: #cdd8e7; white-space: pre-wrap; overflow-wrap: anywhere; }
.work .code-cover code { font: inherit; }
.work .code-keyword { color: #b0bdff; }
.work .code-function { color: #9eccff; }
.work .code-string { color: #b1caaa; }
.work .code-context { margin: 13px 0 0; color: #97aac3; font-size: 12px; line-height: 1.5; }
.work .talk-cover { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: clamp(30px, 7vw, 100px); padding: 20px; background: #101916; }
.work .talk-cover .playbook-poster-art { position: static; display: block; flex: 0 1 auto; height: 100%; width: auto; max-width: 60%; object-fit: contain; transform: none; filter: none; box-shadow: none; border: 0; }
.work .talk-cover-meta { max-width: 32%; color: #a5b5ad; font-size: 12px; line-height: 1.6; }
.work .talk-cover-meta strong { display: block; margin-top: 13px; color: #f3f4ee; font-size: clamp(24px, 3cqw, 38px); line-height: 1.2; font-weight: 400; letter-spacing: -.04em; }
.work .talk-cover-meta > span { display: block; margin-top: 10px; }
.work.scroll-gallery .project-panel:not(.is-active) .cover-location { opacity: 0; }
.work.scroll-gallery .project-panel:not(.is-active) .panel-spine { text-shadow: 0 2px 15px #000; }
@container (max-height: 310px) {
  .work .experiment-cover, .work .code-cover { padding: 21px 28px 17px; }
  .work .cover-kicker { margin-bottom: 11px; }
  .work .experiment-cover h4, .work .code-cover h4 { font-size: 27px; margin-bottom: 12px; }
  .work .experiment-rows > div { padding: 7px 0; }
  .work .experiment-rows strong { font-size: 17px; }
  .work .experiment-constraint, .work .code-context { display: none; }
  .work .code-file { margin-bottom: 6px; font-size: 11px; }
  .work .code-cover pre { font-size: 12px; padding: 9px 0; line-height: 1.8; }
}
@container (max-width: 500px) {
  .work .experiment-cover, .work .code-cover { padding: 24px 21px 18px; }
  .work .cover-kicker { padding-left: 26px; margin-bottom: 20px; font-size: 10px; }
  .work .cover-kicker > span { display: none; }
  .work .experiment-cover h4, .work .code-cover h4 { font-size: 29px; margin-bottom: 20px; }
  .work .experiment-rows > div { grid-template-columns: 19px 1fr; gap: 2px 10px; padding: 9px 0; }
  .work .experiment-rows strong { font-size: 17px; }
  .work .experiment-rows small { grid-column: 2; font-size: 11px; }
  .work .experiment-constraint { display: none; }
  .work .code-cover pre { font-size: 11px; line-height: 1.65; padding: 10px 0; }
  .work .code-file { font-size: 10px; }
  .work .code-context { font-size: 10px; }
  .work .cover-location { left: 21px; bottom: 18px; flex-direction: column; gap: 1px; }
  .work .cover-location > span { align-self: start; font-size: 10px; }
  .work .talk-cover-meta { display: none; }
  .work .talk-cover .playbook-poster-art { max-width: 100%; }
}
@media(max-width:899px) {
  .work .project-panel { background: #070a10; }
  .work .project-panel::after { content: none; }
  .work .panel-content { background: #070a10; }
}

@container (max-height:310px) and (min-width:600px) {
  .work .experiment-cover h4 br, .work .code-cover h4 br { display:none; }
}
/* On smaller screens, artwork and descriptions occupy separate rows. */
.work:not(.scroll-gallery) .project-ribbon { height:auto; align-items:stretch; }
.work:not(.scroll-gallery) .project-panel,
.work:not(.scroll-gallery) .project-panel.is-active { height:auto; display:flex; flex-direction:column; }
.work:not(.scroll-gallery) .project-panel[hidden] { display:none; }
.work:not(.scroll-gallery) .project-panel .project-art { position:relative; inset:auto; flex:0 0 360px; height:360px; }
.work:not(.scroll-gallery) .panel-content { position:relative; inset:auto; flex:1; padding:24px; align-content:start; }
@media(max-width:599px) {
  .work:not(.scroll-gallery) .project-panel .project-art { flex-basis:340px; height:340px; }
  .work:not(.scroll-gallery) .panel-content { padding:23px 21px; }
  .work .code-cover h4 { font-size:26px; margin-bottom:14px; }
  .work .code-cover .cover-kicker { margin-bottom:16px; }
  .work .code-cover .code-context { display:none; }
}