:root {
  --ink:#191919;
  --muted:#737373;
  --blue:#244de4;
  --rule:#e8e8e8;
  --font:Helvetica,Arial,sans-serif;
}

/* Movies: posters and a little room for the words. */
.movies-heading { display:flex; justify-content:space-between; gap:24px; align-items:baseline; padding-bottom:22px; border-bottom:1px solid var(--rule); }
.movies-heading h2, .movies-heading a { margin:0; font-size:14px; font-weight:400; color:var(--muted); }
.movies-heading a:hover, .movie-source:hover, .movie-copy h2 a:hover { color:var(--blue); }
.movie-entry { display:grid; grid-template-columns:180px minmax(0,1fr); gap:64px; padding:48px 0; border-bottom:1px solid var(--rule); }
.movie-poster { display:block; align-self:start; aspect-ratio:2/3; background:#f5f5f5; overflow:hidden; }
.movie-poster img { width:100%; height:100%; object-fit:cover; transition:opacity .18s; }
.movie-poster:hover img { opacity:.86; }
.poster-missing { display:flex; align-items:center; justify-content:center; height:100%; padding:20px; text-align:center; font-size:14px; color:var(--muted); }
.movie-copy { min-width:0; max-width:670px; }
.movie-year { margin:0 0 5px; color:var(--muted); font-size:14px; }
.movie-copy h2 { margin:0; font-size:30px; line-height:1.2; letter-spacing:-.7px; font-weight:400; overflow-wrap:anywhere; }
.movie-meta { display:flex; align-items:center; flex-wrap:wrap; gap:15px; min-height:28px; margin:12px 0 22px; font-size:14px; color:var(--muted); }
.movie-rating { font-size:18px; letter-spacing:2px; color:var(--blue); }
.movie-liked { color:var(--blue); font-size:14px; }
.movie-review { font-size:17px; line-height:1.8; color:#505050; overflow-wrap:anywhere; }
.movie-review p { margin:0 0 18px; }
.movie-source { display:inline-block; padding:8px 0; font-size:14px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--rule); }
.movie-spoilers summary { cursor:pointer; color:var(--ink); margin-bottom:20px; }
.movie-feed-status { margin:24px 0 60px; font-size:14px; color:var(--muted); }
.movie-feed-status a { text-decoration:underline; text-underline-offset:3px; }
.movie-empty { padding:40px 0; color:var(--muted); }
@media(max-width:700px) {
  .movie-entry { grid-template-columns:125px minmax(0,1fr); gap:28px; padding:36px 0; }
  .movie-copy h2 { font-size:26px; }
}
@media(max-width:480px) {
  .site-header { flex-wrap:wrap; height:auto !important; padding:26px 0 17px; gap:22px; }
  .site-header nav { width:100%; justify-content:space-between; gap:10px; }
  .site-header nav a { font-size:14px; }
  .movie-entry { grid-template-columns:84px minmax(0,1fr); gap:22px; }
  .movie-copy { display:contents; }
  .movie-copy header { align-self:center; }
  .movie-copy h2 { font-size:24px; }
  .movie-meta { margin-bottom:0; }
  .movie-review, .movie-source { grid-column:1/-1; }
  .movie-source { justify-self:start; }
  .movie-review p:last-child { margin-bottom:0; }
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font:16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}

::selection {
  background:#dfe6ff;
  color:var(--ink);
}

a {
  color:inherit;
  text-decoration:none;
}

a:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:6px;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

.blue {
  color:var(--blue);
}

.muted {
  color:var(--muted);
}

.site {
  width:min(1040px,calc(100% - 112px));
  margin:auto;
}

.skip {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:10;
  background:#fff;
  border:1px solid var(--blue);
  padding:10px 15px;
}

.skip:focus {
  top:12px;
}

.site-header {
  height:125px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.wordmark {
  font-size:45px;
  letter-spacing:-3.3px;
  line-height:1;
  font-weight:700;
}

.wordmark span {
  color:var(--blue);
}

nav {
  display:flex;
  gap:34px;
}

nav a {
  color:var(--muted);
  font-size:14px;
  padding:8px 0;
  position:relative;
  transition:color .18s;
}

nav a:hover,nav a[aria-current=page] {
  color:var(--blue);
}

nav a:after {
  content:'';
  height:1px;
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s;
}

nav a[aria-current=page]:after {
  transform:scaleX(1);
}

main {
  min-height:calc(100vh - 235px);
}

.home-intro {
  padding:73px 0 87px;
}

.intro-label {
  font-size:14px;
  line-height:1.6;
  margin:0 0 26px;
  color:var(--muted);
}

.home-intro h1 {
  font-size:86px;
  letter-spacing:-5px;
  font-weight:500;
  line-height:1.06;
  margin:0 0 29px;
}

.home-statement {
  font-size:25px;
  line-height:1.5;
  letter-spacing:-.6px;
  margin:0 0 13px;
  max-width:680px;
}

.home-subtext {
  font-size:16px;
  color:var(--muted);
  margin:0 0 27px;
  line-height:1.65;
}

.inline-link {
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:15px;
}

.inline-link:hover {
  color:var(--blue);
}

.arrow {
  display:inline-block;
  transition:transform .18s,color .18s;
  font-weight:400;
}

.inline-link:hover .arrow,.project-row:hover .arrow,.writing-row:hover .arrow,.reading-row:hover .arrow,.quiet-link:hover .arrow {
  transform:translate(3px,-3px);
  color:var(--blue);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-bottom:19px;
}

.section-heading h2 {
  font-size:14px;
  font-weight:400;
  margin:0;
  color:var(--muted);
}

.quiet-link {
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:15px;
}

.quiet-link:hover {
  color:var(--blue);
}

.work-index {
  border-top:1px solid var(--rule);
}

.project-row {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 145px 14px;
  gap:24px;
  align-items:start;
  padding:27px 0;
  border-bottom:1px solid var(--rule);
  transition:border-color .18s;
}

.row-number {
  font-size:12px;
  color:#858585;
  padding-top:5px;
  font-variant-numeric:tabular-nums;
}

.row-main h3 {
  font-size:19px;
  line-height:1.3;
  font-weight:400;
  letter-spacing:-.35px;
  margin:0 0 5px;
  transition:color .18s;
}

.row-main p {
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
  margin:0;
  max-width:600px;
}

.row-type {
  font-size:12px;
  color:var(--muted);
  padding-top:4px;
}

.project-row>.arrow {
  font-size:19px;
  line-height:1.3;
}

.project-row:hover h3,.writing-row:hover h2,.reading-row:hover h2 {
  color:var(--blue);
}

.project-row:hover {
  border-bottom-color:#b9b9b9;
}

.selected-work {
  padding-bottom:77px;
}

.site-footer {
  border-top:1px solid var(--rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:29px 0 34px;
  font-size:12px;
  color:var(--muted);
}

.site-footer a {
  display:flex;
  gap:12px;
  align-items:center;
}

.site-footer a:hover {
  color:var(--blue);
}

.footer-separator {
  padding:0 6px;
  color:#bdbdbd;
}

.page-heading {
  padding:69px 0 67px;
  max-width:700px;
}

.page-heading h1 {
  font-size:62px;
  line-height:1.08;
  letter-spacing:-3px;
  font-weight:500;
  margin:0 0 25px;
}

.page-heading p {
  font-size:20px;
  color:var(--muted);
  letter-spacing:-.3px;
  line-height:1.6;
  margin:0;
  max-width:615px;
}

.index-head {
  display:flex;
  justify-content:space-between;
  padding:0 38px 17px 54px;
  color:var(--muted);
  font-size:12px;
}

.index-head span:last-child {
  width:145px;
}

.row-status {
  font-size:11px;
  display:inline-block;
  line-height:1.5;
  color:var(--muted);
  margin-top:15px;
}

.index-footnote {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin:26px 0 83px;
  max-width:650px;
}

.writing-index {
  border-top:1px solid var(--rule);
}

.writing-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 20px;
  gap:25px;
  align-items:center;
  padding:31px 0;
  border-bottom:1px solid var(--rule);
}

.writing-row .row-status {
  margin:0 0 13px;
  color:var(--blue);
}

.writing-row h2 {
  font-size:25px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.6px;
  margin:0 0 10px;
  transition:color .18s;
}

.writing-row p {
  font-size:15px;
  color:var(--muted);
  margin:0;
  line-height:1.6;
  max-width:650px;
}

.reading-head {
  display:flex;
  justify-content:space-between;
  padding:0 39px 17px 54px;
  font-size:12px;
  color:var(--muted);
}

.reading-head span:last-child {
  width:93px;
}

.reading-index {
  border-top:1px solid var(--rule);
}

.reading-row {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 93px 14px;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
  align-items:center;
}

.reading-row .row-number {
  padding:0;
}

.reading-row h2 {
  font-size:21px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:-.35px;
  margin:0 0 4px;
  transition:color .18s;
}

.reading-row p {
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.reading-status {
  font-size:12px;
  color:var(--muted);
}

.back-link {
  display:inline-flex;
  color:var(--muted);
  font-size:13px;
  margin:37px 0 0;
}

.back-link:hover {
  color:var(--blue);
}

.detail-heading {
  padding:49px 0 42px;
  max-width:850px;
}

.detail-heading .intro-label {
  margin-bottom:23px;
}

.detail-heading h1 {
  font-size:53px;
  line-height:1.14;
  font-weight:500;
  letter-spacing:-2.1px;
  margin:0 0 28px;
  text-wrap:pretty;
}

.detail-intro {
  font-size:20px;
  line-height:1.65;
  letter-spacing:-.2px;
  color:var(--muted);
  max-width:750px;
  margin:0;
}

.project-meta {
  display:flex;
  gap:90px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:22px 0;
  margin:0 0 58px;
}

.project-meta span {
  font-size:11px;
  color:var(--muted);
}

.project-meta p {
  font-size:14px;
  margin:5px 0 0;
}

.project-figure {
  margin:0 0 58px;
}

.project-figure img {
  border:1px solid var(--rule);
}

.project-figure figcaption {
  font-size:11px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.6;
}

.prose {
  max-width:690px;
  margin-left:auto;
  margin-right:auto;
}

.prose h2 {
  font-size:23px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.4px;
  margin:0 0 18px;
}

.prose p {
  font-size:17px;
  line-height:1.85;
  color:#505050;
  margin:0 0 29px;
}

.prose section {
  margin:0 0 46px;
}

.end-link {
  border-top:1px solid var(--rule);
  padding:28px 0 65px;
  margin-top:52px;
}

.essay-heading {
  max-width:820px;
  padding-bottom:44px;
}

.essay-prose {
  border-top:1px solid var(--rule);
  padding-top:27px;
  max-width:720px;
  margin-left:0;
}

.prose .editorial-note {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:36px;
}

.book-heading {
  max-width:790px;
  padding-bottom:30px;
}

.book-heading h1 {
  font-size:62px;
}

.book-prose {
  margin-left:0;
  border-top:1px solid var(--rule);
  padding-top:28px;
}

.prose .book-note-label {
  font-size:12px;
  color:var(--muted);
  margin-bottom:22px;
}

.book-prose p {
  font-size:20px;
}

.about-layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:70px;
  padding:11px 0 78px;
}

.about-aside {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  padding-top:8px;
}

.about-prose {
  margin:0;
}

.prose .about-opening {
  font-size:28px;
  line-height:1.45;
  font-weight:400;
  letter-spacing:-.7px;
  color:var(--ink);
  margin-bottom:33px;
}

.page-enter {
  animation:appear .32s ease-out both;
}

@keyframes appear {
  from {
    opacity:0;
    transform:translateY(5px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1500px) {
  .site {
    width:1080px;
  }
  .home-intro {
    padding-top:103px;
    padding-bottom:98px;
  }
  .home-intro h1 {
    font-size:94px;
  }
  .site-header {
    height:135px;
  }
}

@media(max-width:900px) {
  .site {
    width:calc(100% - 64px);
  }
  .site-header {
    height:107px;
  }
  .home-intro {
    padding:65px 0 70px;
  }
  .home-intro h1 {
    font-size:73px;
    letter-spacing:-3.5px;
  }
  .home-statement {
    font-size:23px;
  }
  .project-row {
    grid-template-columns:22px minmax(0,1fr) 119px 14px;
    gap:18px;
  }
  .row-type {
    font-size:11px;
  }
  .index-head {
    padding-left:40px;
    padding-right:32px;
  }
  .index-head span:last-child {
    width:119px;
  }
  .about-layout {
    grid-template-columns:170px minmax(0,1fr);
    gap:35px;
  }
  .prose .about-opening {
    font-size:26px;
  }
  .site-footer {
    font-size:11px;
  }
  .page-heading h1 {
    font-size:56px;
  }
  .detail-heading h1 {
    font-size:46px;
  }
  .project-meta {
    gap:45px;
  }
}

@media(max-width:600px) {
  .site {
    width:calc(100% - 44px);
  }
  .site-header {
    height:99px;
  }
  .wordmark {
    font-size:37px;
    letter-spacing:-2.8px;
  }
  nav {
    gap:20px;
  }
  nav a {
    font-size:12px;
    padding:10px 0;
  }
  .home-intro {
    padding:50px 0 65px;
  }
  .intro-label {
    font-size:12px;
    margin-bottom:22px;
  }
  .home-intro h1 {
    font-size:60px;
    letter-spacing:-3.2px;
    margin-bottom:25px;
  }
  .home-statement {
    font-size:22px;
    letter-spacing:-.45px;
    line-height:1.5;
  }
  .wide-break {
    display:none;
  }
  .home-subtext {
    font-size:14px;
    line-height:1.7;
    margin-top:17px;
    max-width:295px;
  }
  .inline-link {
    font-size:13px;
    gap:15px;
  }
  .section-heading {
    padding-bottom:16px;
  }
  .section-heading h2 {
    font-size:12px;
  }
  .quiet-link {
    font-size:12px;
  }
  .project-row {
    grid-template-columns:20px minmax(0,1fr) 14px;
    gap:13px;
    padding:24px 0;
  }
  .row-type {
    display:none;
  }
  .row-main h3 {
    font-size:18px;
    letter-spacing:-.3px;
  }
  .row-main p {
    font-size:13px;
    line-height:1.65;
    margin-top:8px;
  }
  .row-number {
    font-size:10px;
    padding-top:3px;
  }
  .project-row>.arrow {
    font-size:17px;
  }
  .selected-work {
    padding-bottom:54px;
  }
  .site-footer {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    font-size:10px;
    padding:24px 0 30px;
  }
  .site-footer>span:nth-child(2) {
    grid-column:1;
    grid-row:2;
  }
  .site-footer>a {
    grid-column:2;
    grid-row:1 / 3;
  }
  .footer-separator {
    padding:0 4px;
  }
  .page-heading {
    padding:50px 0 43px;
  }
  .page-heading h1 {
    font-size:48px;
    letter-spacing:-2.5px;
    margin-bottom:23px;
  }
  .page-heading p {
    font-size:18px;
    line-height:1.65;
    letter-spacing:-.25px;
  }
  .index-head {
    padding-left:33px;
    font-size:11px;
  }
  .index-head span:last-child {
    display:none;
  }
  .index-footnote {
    margin:22px 0 55px;
    font-size:11px;
  }
  .writing-row {
    padding:27px 0;
    gap:17px;
  }
  .writing-row h2 {
    font-size:22px;
    letter-spacing:-.5px;
    line-height:1.4;
  }
  .writing-row p {
    font-size:14px;
    line-height:1.7;
  }
  .writing-row .row-status {
    font-size:10px;
  }
  .reading-head {
    padding-left:33px;
    font-size:11px;
  }
  .reading-head span:last-child {
    display:none;
  }
  .reading-row {
    grid-template-columns:20px minmax(0,1fr) 14px;
    gap:13px;
    padding:24px 0;
  }
  .reading-status {
    display:none;
  }
  .reading-row h2 {
    font-size:19px;
    letter-spacing:-.3px;
  }
  .reading-row p {
    font-size:13px;
  }
  .back-link {
    margin-top:25px;
    font-size:12px;
  }
  .detail-heading {
    padding:36px 0 32px;
  }
  .detail-heading h1 {
    font-size:36px;
    letter-spacing:-1.4px;
    line-height:1.17;
  }
  .detail-heading .intro-label {
    font-size:12px;
    margin-bottom:19px;
  }
  .detail-intro {
    font-size:17px;
    line-height:1.75;
  }
  .project-meta {
    gap:25px;
    margin-bottom:35px;
    padding:18px 0;
  }
  .project-meta>div {
    flex:1;
  }
  .project-meta p {
    font-size:12px;
    line-height:1.65;
  }
  .project-figure {
    margin-bottom:38px;
  }
  .project-figure figcaption {
    font-size:10px;
  }
  .prose p {
    font-size:16px;
    line-height:1.85;
    margin-bottom:26px;
  }
  .prose h2 {
    font-size:21px;
    line-height:1.4;
    margin-bottom:14px;
  }
  .prose section {
    margin-bottom:35px;
  }
  .end-link {
    margin-top:35px;
    padding-bottom:45px;
  }
  .essay-prose {
    padding-top:23px;
  }
  .prose .editorial-note {
    font-size:12px;
  }
  .book-heading h1 {
    font-size:43px;
  }
  .book-prose p {
    font-size:18px;
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:31px;
    padding:0 0 58px;
  }
  .about-aside {
    border-bottom:1px solid var(--rule);
    padding-bottom:22px;
    font-size:11px;
  }
  .prose .about-opening {
    font-size:25px;
    letter-spacing:-.5px;
  }
  .about-opening br {
    display:none;
  }
}

@media(max-width:360px) {
  .site {
    width:calc(100% - 32px);
  }
  nav {
    gap:14px;
  }
  .home-intro h1 {
    font-size:52px;
  }
  .home-statement {
    font-size:20px;
  }
  .page-heading h1 {
    font-size:43px;
  }
  .detail-heading h1 {
    font-size:33px;
  }
}

.collection-note {
  max-width:620px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  margin:27px 0 0;
}

.collection-note a {
  color:var(--ink);
  white-space:nowrap;
  border-bottom:1px solid var(--rule);
}

.work-nav {
  display:flex;
  flex-wrap:wrap;
  gap:12px 30px;
  border-bottom:1px solid var(--rule);
  padding:0 0 25px;
  margin-bottom:60px;
}

.work-nav a {
  font-size:13px;
}

.work-chapter {
  margin-bottom:78px;
  scroll-margin-top:35px;
}

.chapter-heading {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:24px;
  align-items:baseline;
  margin-bottom:25px;
}

.chapter-number {
  color:var(--blue);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.chapter-heading h2,.still-curious h2 {
  font-size:29px;
  letter-spacing:-.8px;
  line-height:1.3;
  font-weight:400;
  margin:0 0 9px;
}

.chapter-heading p {
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.work-chapter .row-status {
  margin-top:10px;
}

.still-curious {
  border-top:1px solid var(--rule);
  padding:35px 0 45px 54px;
  margin-bottom:54px;
}

.still-curious .intro-label {
  color:var(--blue);
  margin-bottom:18px;
}

.still-curious>p:last-child {
  font-size:16px;
  max-width:625px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:0;
}

.recognition {
  margin-bottom:80px;
  scroll-margin-top:35px;
}

.recognition-list {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
}

.recognition-list li {
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--rule);
}

.award-result {
  font-size:12px;
  color:var(--blue);
  padding-top:3px;
}

.recognition-list h3 {
  font-size:16px;
  line-height:1.4;
  font-weight:400;
  margin:0 0 5px;
}

.recognition-list p {
  font-size:12px;
  color:var(--muted);
  margin:0;
}

.project-flow {
  list-style:none;
  padding:0 0 25px;
  margin:0 0 55px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--rule);
  gap:20px;
}

.project-flow li {
  font-size:15px;
}

.project-flow span {
  display:block;
  font-size:11px;
  color:var(--blue);
  margin-bottom:9px;
}

.about-contact {
  margin-top:24px;
  color:var(--muted);
}

@media(max-width:600px) {
  .work-nav {gap:7px 22px;margin-bottom:40px;padding-bottom:20px;}
  .work-nav a {font-size:12px;}
  .work-chapter {margin-bottom:52px;}
  .chapter-heading {grid-template-columns:20px minmax(0,1fr);gap:13px;}
  .chapter-heading h2,.still-curious h2 {font-size:25px;letter-spacing:-.6px;}
  .chapter-heading p {font-size:13px;}
  .chapter-number {font-size:11px;}
  .still-curious {padding:27px 0 20px;margin-bottom:43px;}
  .still-curious>p:last-child {font-size:15px;}
  .recognition-list {grid-template-columns:1fr;}
  .recognition-list li {grid-template-columns:78px minmax(0,1fr);gap:16px;padding:20px 0;}
  .recognition {margin-bottom:55px;}
  .project-flow {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;margin-bottom:35px;}
  .project-flow li {font-size:14px;}
  .collection-note {font-size:13px;}
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

/* Project stories: quiet navigation, readable paragraphs, and work you can inspect. */
.case-heading { max-width:910px; padding-top:42px; }
.case-heading h1 { font-weight:400; font-size:56px; line-height:1.12; text-wrap:balance; }
.case-identity { display:flex; align-items:center; gap:22px; min-height:36px; margin-bottom:30px; }
.case-identity .intro-label { margin:0; }
.case-logo { width:auto; max-width:155px; max-height:31px; object-fit:contain; }
.case-meta { align-items:center; gap:40px; }
.case-context { font-size:13px; margin-left:auto; max-width:220px; line-height:1.6; }
.case-context .arrow { margin-left:5px; }
.case-figure { margin:30px 0; }
.case-figure img { display:block; width:100%; height:auto; outline:1px solid rgb(0 0 0 / .08); outline-offset:-1px; }
.case-figure .image-link { display:block; }
.case-figure .image-link:hover { opacity:.95; }
.case-figure figcaption,.story-diagram figcaption,.story-artifact figcaption,.case-prose .visual-caption { font-size:12px; color:var(--muted); line-height:1.65; margin:12px 0 0; }
.case-figure figcaption a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.case-hero { max-width:850px; margin:0 auto 65px; }
.case-hero img { max-height:540px; object-fit:contain; background:#fafafa; }
.case-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:68px; align-items:start; }
.story-contents { position:sticky; top:32px; padding-top:4px; }
.story-contents>p { color:var(--muted); font-size:12px; margin:0 0 16px; }
.story-contents nav { display:grid; gap:4px; }
.story-contents a { display:flex; gap:12px; padding:11px 0; font-size:13px; line-height:1.5; color:var(--muted); }
.story-contents a span { color:var(--blue); font-size:10px; padding-top:3px; flex-shrink:0; }
.story-contents a:hover { color:var(--blue); }
.story-section { margin-bottom:55px; scroll-margin-top:35px; }
.case-prose h2 { font-size:26px; font-weight:400; line-height:1.3; letter-spacing:-.6px; margin:0 0 21px; text-wrap:balance; }
.case-prose p { font-size:17px; line-height:1.85; color:#505050; margin:0 0 22px; text-wrap:pretty; }
.case-prose h3 { font-size:23px; line-height:1.3; font-weight:400; letter-spacing:-.5px; margin:0 0 25px; }
.case-prose h4 { font-size:16px; line-height:1.4; font-weight:500; margin:0 0 9px; }
.story-diagram,.story-artifact { margin:34px 0; padding:30px; border:1px solid #e3e7ef; background:#fbfcfe; }
.case-prose .visual-label { font-size:11px; color:var(--blue); letter-spacing:.025em; margin:0 0 14px; }
.flow-terminal { font-size:15px; text-align:center; padding:17px 12px; background:#fff; border:1px solid #dde4f2; line-height:1.5; }
.flow-branches { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.flow-branches>div { text-align:center; }
.flow-arrow,.flow-merge { color:var(--blue); display:block; font-size:22px; text-align:center; padding:12px 0; }
.case-prose .flow-branches p { font-size:14px; line-height:1.65; margin:0; }
.flow-outcome { background:#eef3ff; color:#1e42bd; }
.story-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:27px 30px; }
.story-steps li { border-top:1px solid #dce2ed; padding-top:13px; }
.step-number { display:block; font-size:11px; color:var(--blue); margin-bottom:12px; }
.case-prose .story-steps p { font-size:14px; line-height:1.7; margin:0; }
.story-diagram figcaption { border-top:1px solid #e3e7ef; padding-top:16px; margin-top:24px; }
.career-timeline { list-style:none; padding:0; margin:32px 0; }
.career-timeline li { display:grid; grid-template-columns:95px 1fr; gap:20px; border-top:1px solid var(--rule); padding:19px 0; }
.career-timeline li:last-child { border-bottom:1px solid var(--rule); }
.career-timeline span { font-size:12px; color:var(--muted); padding-top:3px; }
.career-timeline strong { font-size:17px; font-weight:400; }
.story-stats { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:34px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:28px 0; }
.story-stats div { display:flex; flex-direction:column-reverse; gap:10px; }
.story-stats dt { color:var(--muted); font-size:12px; line-height:1.5; }
.story-stats dd { font-size:30px; letter-spacing:-1px; margin:0; color:var(--blue); }
.story-gallery { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.story-gallery .case-figure { margin-bottom:0; }
.story-artifact { background:#fff; border-color:var(--rule); border-top:3px solid var(--blue); }
.story-artifact ol { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; list-style:none; padding:0; margin:20px 0 27px; }
.story-artifact li { font-size:14px; line-height:1.6; padding:12px 0; border-bottom:1px solid var(--rule); }
.story-artifact .artifact-subtitle { font-size:17px; margin-top:-12px; }
.story-details { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:28px; }
.story-details summary { cursor:pointer; font-size:14px; padding:18px 0; }
.story-details p { font-size:14px; padding:0 0 4px; }
.story-links { border-top:1px solid var(--rule); margin:28px 0 0; }
.story-links>a { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:21px 0; border-bottom:1px solid var(--rule); }
.story-links strong { display:block; font-size:19px; font-weight:400; line-height:1.4; }
.story-links a>span>span { display:block; margin-top:6px; font-size:14px; line-height:1.65; color:var(--muted); }
.related-work { margin:20px 0 0 288px; }
.related-work .intro-label { font-size:12px; }
.video-link { display:block; margin:30px 0; }
.video-link>img { width:100%; height:auto; display:block; }
.video-link>span { display:flex; justify-content:space-between; gap:25px; padding:17px 0; }
.video-link strong { font-size:16px; font-weight:400; }
.video-link>span>span { white-space:nowrap; color:var(--blue); font-size:12px; padding-top:3px; }
@media(max-width:900px) {
 .case-layout { grid-template-columns:175px minmax(0,1fr); gap:40px; }
 .related-work { margin-left:215px; }
 .case-heading h1 { font-size:47px; }
 .case-meta { gap:25px; flex-wrap:wrap; }
 .story-stats dd { font-size:26px; }
}
@media(max-width:650px) {
 .case-heading { padding-top:30px; }
 .case-heading h1 { font-size:37px; letter-spacing:-1.4px; }
 .case-identity { gap:15px; flex-wrap:wrap; margin-bottom:24px; }
 .case-logo { max-width:122px; max-height:27px; }
 .case-meta { gap:20px; }
 .case-meta>div { flex:1; min-width:120px; }
 .case-context { margin-left:0; flex-basis:100%; max-width:none; font-size:12px; }
 .case-layout { display:block; }
 .story-contents { position:static; margin:0 0 35px; padding:0 0 22px; border-bottom:1px solid var(--rule); }
 .story-contents nav { grid-template-columns:1fr 1fr; gap:0 20px; }
 .story-contents a { font-size:12px; }
 .case-prose p { font-size:16px; line-height:1.8; }
 .case-prose h2 { font-size:24px; }
 .case-prose h3 { font-size:22px; }
 .story-section { margin-bottom:42px; }
 .story-diagram,.story-artifact { padding:23px 20px; margin:27px 0; }
 .flow-branches { gap:17px; }
 .case-prose .flow-branches p { font-size:13px; }
 .story-steps { gap:22px; }
 .story-stats { gap:20px; }
 .story-stats dd { font-size:25px; letter-spacing:-.8px; }
 .case-hero { margin-bottom:35px; }
 .related-work { margin-left:0; }
 .story-gallery { grid-template-columns:1fr; }
 .story-artifact ol { grid-template-columns:1fr; }
 .video-link>span { flex-direction:column; gap:9px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.case-logo[src$="ai-fiesta.svg"] { background:#171717; padding:7px 10px; box-sizing:content-box; }

/* Work groups are quiet labels within one index, with equal treatment for each entry. */
.work-group-label { font-size:14px; line-height:1.5; font-weight:400; color:var(--muted); margin:0 0 17px; }
.project-row-plain { grid-template-columns:minmax(0,1fr) 145px 14px; }
@media(max-width:650px) {
 .project-row-plain { grid-template-columns:minmax(0,1fr) 14px; }
 .project-row-plain .row-type { display:none; }
 .work-group-label { font-size:13px; margin-bottom:15px; }
}