html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.project-story {
  --story-line: color-mix(in srgb, currentColor 34%, transparent);
  --story-gap: clamp(20px, 5vw, 80px);
  min-width: 0;
  text-transform: none;
  padding-block: clamp(18px, 3vw, 42px) clamp(12px, 2vw, 28px);
}
.project-story [id] { scroll-margin-top: calc(var(--masthead-height, 100px) + 16px); }
.project-story figure { min-width: 0; }
.project-story figcaption { margin-top: .65rem; font-size: .78rem; line-height: 1.4; }
.project-story figure > a { display: block; }
.story-opening { margin: 0 0 clamp(30px, 5.5vw, 75px); }
.story-opening > div { max-width: 70rem; }
.story-opening h3, .story-copy h4 {
  font-weight: 400;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.story-opening h3 { font-size: clamp(2.15rem, 5.2vw, 5.45rem); line-height: .95; letter-spacing: -.075em; max-width: 17ch; }
.story-opening p {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  line-height: 1.48;
  max-width: 43ch;
}
.story-beat {
  display: grid;
  gap: clamp(20px, 3.2vw, 47px);
  padding-block: clamp(28px, 4.7vw, 69px);
  border-top: 1px solid var(--story-line);
}
.story-copy, .story-art { min-width: 0; }
.story-copy h4 { font-size: clamp(1.65rem, 3.12vw, 3.45rem); line-height: 1.04; }
.story-copy > p {
  max-width: 56ch;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.57;
  margin-top: .75em;
}
.story-split { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); align-items: center; gap: var(--story-gap); }
.story-alias { position: absolute; }
.case-annotation {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .45rem;
  margin-top: 1.2rem;
  padding-top: .75rem;
  border-top: 1px solid var(--story-line);
  max-width: 52ch;
  font-size: .9rem;
  line-height: 1.5;
}
.case-annotation strong { font-weight: 650; }
.story-links { display: flex; flex-wrap: wrap; gap: .8rem 1.45rem; margin-top: 1.25rem; }
.story-link, .story-return { font-size: .86rem; text-underline-offset: .26em; font-weight: 600; }
.story-link:hover, .story-return:hover { text-decoration-style: dotted; }
.story-credit {
  border-top: 1px solid var(--story-line);
  padding-top: 1.1rem;
  margin-top: 1rem;
  font: 500 .85rem/1.55 var(--sans);
}
.story-credit p { margin-top: .25em; }
.story-return { display: inline-block; margin-top: 1.35rem; }
.artwork-feature img { width: auto; max-height: min(75vh, 690px); margin-inline: auto; }
.artwork-feature figcaption { text-align: center; }
#cirkular-scroll { max-width: 1050px; }
.story-prototype { width: min(100%, 398px); margin-inline: auto; }
.story-prototype iframe {
  display: block;
  width: 100%;
  height: clamp(650px, 84svh, 820px);
  border: 1px solid var(--story-line);
  border-radius: var(--media-radius);
  background: #fffefd;
}
#cornell-now-chapter-5 .story-links { justify-content: center; }
.story-flow, .tab-shape-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.6vw, 42px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 60rem;
}
.story-flow li { border-top: 1px solid var(--story-line); padding-top: .8rem; }
.story-flow strong, .story-flow span, .tab-shape-sequence strong, .tab-shape-sequence li > span { display: block; }
.story-flow strong { font-size: clamp(1.18rem, 2vw, 1.95rem); font-weight: 500; letter-spacing: -.045em; }
.story-flow span, .tab-shape-sequence li > span { margin-top: .4rem; font-size: .85rem; line-height: 1.48; max-width: 24ch; }
.tab-shape-sequence li { min-width: 0; }
.tab-soft-square {
  aspect-ratio: 1.16;
  background: #faf8f2;
  border-radius: clamp(12px, 4vw, 55px);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tab-soft-square > img { width: 55%; max-height: 85%; object-fit: contain; }
.tab-soft-square figure, .tab-soft-square .video-surface { width: 100%; height: 100%; }
.tab-soft-square .video-surface video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tab-message-sample {
  background: #1962b4;
  color: #fff;
  margin: .35rem;
  padding: .55rem .7rem;
  border-radius: .85rem .85rem .25rem .85rem;
  max-width: 85%;
  font-size: clamp(.62rem, 1.45vw, 1.05rem);
  line-height: 1.3;
}
.tab-shape-sequence strong { margin-top: .65rem; font-weight: 600; }
.case-gallery {
  --item-width: clamp(265px, 47%, 570px);
  --item-height: clamp(220px, 32vw, 460px);
  --gallery-gap: clamp(12px, 2.1vw, 32px);
  min-width: 0;
}
.story-art > :not(:first-child).case-gallery { margin-top: clamp(20px, 4vw, 52px); }
.gallery-art { --item-width: clamp(240px, 39%, 500px); --item-height: clamp(265px, 34vw, 490px); }
.gallery-tall { --item-width: clamp(235px, 34%, 380px); --item-height: clamp(300px, 40vw, 500px); }
.gallery-phone { --item-width: clamp(218px, 36%, 313px); --item-height: clamp(400px, 49vw, 620px); }
.gallery-wide { --item-width: clamp(265px, 60%, 720px); }
.gallery-edition { --item-width: clamp(236px, 36%, 405px); }
.gallery-header {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .4rem;
  font-weight: 550;
  font-size: .87rem;
}
.gallery-nav { display: flex; gap: .2rem; }
.gallery-nav[hidden] { display: none; }
.gallery-arrow {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: var(--site-cursor-action, pointer);
}
.gallery-arrow:disabled { opacity: .32; cursor: var(--site-cursor-arrow, default); }
.gallery-arrow:not(:disabled):hover { outline: 1px solid var(--story-line); outline-offset: -5px; }
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(var(--item-width), 88%);
  gap: var(--gallery-gap);
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 5px 8px;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip > figure { scroll-snap-align: start; }
.gallery-strip :focus-visible { outline-offset: -3px; }
.gallery-strip img, .gallery-strip .video-surface video {
  display: block;
  width: 100%;
  height: var(--item-height);
  object-fit: contain;
  object-position: center bottom;
}
.gallery-edition img, .gallery-edition .video-surface video { height: auto; aspect-ratio: 4 / 5; }
.gallery-phone img { width: auto; max-width: 100%; margin-inline: auto; }
.gallery-phone figcaption { text-align: center; }
.video-surface {
  appearance: none;
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  border: 0;
  border-radius: var(--media-radius);
  background: transparent;
  box-shadow: none;
  cursor: var(--site-cursor-action, pointer);
  -webkit-tap-highlight-color: transparent;
}
.video-surface video { display: block; width: 100%; height: auto; pointer-events: none; box-shadow: none; }
@media (min-width: 761px) {
  .story-opening > div {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
    align-items: end;
    gap: 13px clamp(22px, 7vw, 135px);
  }
  .story-opening p { margin-top: 0; }
}
@media (max-width: 760px) {
  .story-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 455px) {
  .story-flow { grid-template-columns: 1fr; gap: .85rem; }
  .tab-shape-sequence { gap: 9px; }
  .tab-shape-sequence li > span { font-size: .75rem; }
}

.story-paired {
  grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 1fr);
  align-items: start;
  gap: clamp(24px, 4.7vw, 76px);
}
.story-paired > .story-copy { grid-column: 2; grid-row: 1; }
.story-paired > .story-art { grid-column: 1; grid-row: 1; }
.story-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.story-text > h4 { font-weight: 400; letter-spacing: -.055em; font-size: clamp(1.65rem, 3.12vw, 3.45rem); line-height: 1.04; text-wrap: balance; }
.story-text .story-copy > p:first-child { margin-top: 0; }
.story-copy h5 { font-size: clamp(1rem, 1.35vw, 1.24rem); margin-top: 1.75rem; font-weight: 620; letter-spacing: -.025em; }
.story-decisions { list-style: none; padding: 0; margin: 1.3rem 0 0; max-width: 48ch; }
.story-decisions li { padding: .7rem 0; border-top: 1px solid var(--story-line); font-size: .9rem; line-height: 1.48; }
.story-decisions strong { margin-right: .2em; }
.case-depth { margin-top: 1.45rem; border-block: 1px solid var(--story-line); }
.case-depth > summary { display: flex; align-items: baseline; gap: .6rem; padding: .8rem 1.2rem .8rem 0; position: relative; font-size: .87rem; font-weight: 650; cursor: var(--site-cursor-action, pointer); }
.case-depth > summary::-webkit-details-marker { display: none; }
.case-depth > summary span { font-weight: 400; }
.case-depth > summary::after { content: "+"; position: absolute; right: 0; }
.case-depth[open] > summary::after { content: "−"; }
.case-depth-body { padding-bottom: 1rem; font-size: .88rem; line-height: 1.5; }
.case-depth-body .case-gallery { --item-width: min(300px, 85%); --item-height: 220px; }
.case-depth-body .gallery-header { margin-top: .25rem; }
.archive-images { display: grid; grid-auto-flow: column; grid-auto-columns: 79%; gap: .7rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-top: .85rem; }
.archive-images figure { scroll-snap-align: start; }
.archive-images img { width: 100%; height: auto; }
#cornell-map .gallery-phone { --item-width: clamp(185px, 48%, 295px); --item-height: clamp(378px, 42vw, 590px); }
#cornell-map .gallery-header { margin-bottom: .65rem; }
#cornell-original-figma img {
  width: min(100%, calc(var(--item-height) * 393 / 852));
  aspect-ratio: 393 / 852;
}
#cornell-now-chapter-5 .story-links { justify-content: flex-start; }
#cornell-now-chapter-5 .story-prototype {
  width: min(100%, 393px);
  margin-inline: auto;
}
#cornell-now-chapter-5 .story-prototype iframe {
  aspect-ratio: 393 / 852;
  height: auto;
  border: 0;
  border-radius: clamp(20px, 2vw, 30px);
}
@media (min-width: 761px) {
  #cornell-now-chapter-5 {
    grid-template-columns: minmax(0, 393px) minmax(0, 43ch);
    justify-content: center;
    align-items: center;
  }
}
.story-paired .gallery-edition { --item-width: clamp(215px, 47%, 350px); }
.story-paired .gallery-tall { --item-width: clamp(215px, 46%, 345px); }
@media (max-width: 760px) {
  .story-paired, .story-text { grid-template-columns: minmax(0, 1fr); }
  .story-paired > .story-copy, .story-paired > .story-art { grid-column: auto; grid-row: auto; }
  .story-text { gap: .7rem; }
  #cornell-map .gallery-phone { --item-height: clamp(350px, 102vw, 510px); }
}

.project-story img, .project-story video, .project-story .video-surface { border-radius: var(--media-radius); }
.project-story .tab-soft-square .video-surface video { border-radius: 0; }
.gallery-strip {
  padding: 10px 10px 14px;
  margin-inline: -10px;
  scroll-padding-inline: 10px;
}
.gallery-strip img, .gallery-strip .video-surface video { height: auto; max-height: var(--item-height); width: auto; max-width: 100%; margin-inline: auto; }
.gallery-strip .video-surface { width: fit-content; max-width: 100%; margin-inline: auto; }
.gallery-edition img, .gallery-edition .video-surface video { width: 100%; height: auto; max-height: none; }
.gallery-edition .video-surface { width: 100%; }
.gallery-strip figure:has(.video-surface) figcaption, .gallery-strip figure:has(img) figcaption { text-align: center; }
.media-depth { perspective: 960px; }
.media-depth > .media-plane { transform: rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); transform-origin: center; transition: transform .24s cubic-bezier(.18,.68,.3,1); }
.media-depth[data-tilting] > .media-plane { transition-duration: .11s; }
.media-depth > .media-plane > img, .media-depth > .media-plane > video { display: block; }
@media (prefers-reduced-motion: reduce) { .media-depth > .media-plane { transform: none; transition: none; } }
.live-case iframe { display: block; width: 100%; height: 478px; border: 1px solid var(--story-line); border-radius: var(--media-radius); background: #ebffca; }
@media (max-width: 420px) { .live-case iframe { height: 454px; } }

/* Faith and Flik: place the work next to the decision it makes visible. */
#case-faith .evidence-opening h3, #case-flik .evidence-opening h3 { max-width: 19ch; }
#case-faith .evidence-opening p, #case-flik .evidence-opening p { max-width: 43ch; }
.evidence-pair > .story-art { align-self: start; }
.evidence-pair > .story-art > figure > img,
.evidence-pair > .story-art > figure > a > img,
.deck-pair img, .evidence-pair .video-surface video { display: block; width: 100%; height: auto; box-shadow: none; }
.evidence-pair figcaption, .deck-proof figcaption { color: inherit; }
.evidence-pair figcaption strong, .deck-proof figcaption strong { margin-right: .25em; }
.evidence-pair figcaption a { display: inline-block; margin-left: .2em; font-size: inherit; }
.evidence-numbers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding: .85rem 0 .2rem; margin: 1.2rem 0 0; border-top: 1px solid var(--story-line); }
.evidence-numbers dt { font-size: clamp(1.65rem, 3vw, 3.1rem); font-weight: 560; line-height: 1.05; letter-spacing: -.075em; }
.evidence-numbers dd { font-size: .8rem; line-height: 1.42; max-width: 18ch; margin: .35rem 0 0; }
.story-copy > .evidence-source { font-size: .72rem; margin-top: .8rem; }
.deck-proof { grid-template-columns: minmax(0,1fr); }
.deck-proof .story-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .55rem clamp(24px,4vw,70px); align-items: baseline; }
.deck-proof .story-copy p { margin: 0; }
.deck-pair, .tutorial-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,2vw,27px); align-items: start; }
.deck-pair figure > a { height: auto; }
.deck-pair img { aspect-ratio: 16/9; object-fit: contain; }
.proof-wide { grid-column: 1 / -1; min-width: 0; }
.deck-proof .gallery-wide { --item-width: clamp(245px, 39%, 540px); --item-height: 500px; }
#flik-tutorials .proof-wide .gallery-tall { --item-width: clamp(210px,30%,355px); --item-height: 430px; }
#flik-tutorials .tutorial-pair .video-surface { width: 100%; }
#flik-templates > .story-art { justify-self: stretch; }
#flik-templates > .story-art figure { width: min(100%, 310px); margin-inline: auto; }
#faith-chapter-5 > .story-art figure { width: min(100%, 640px); margin-inline: auto; }
.proof-notes { margin: .15rem 0 .8rem; }
.proof-notes > div { display: grid; grid-template-columns: minmax(5.5rem,1fr) minmax(0,3fr); gap: .65rem; padding-block: .45rem; }
.proof-notes dt { font-weight: 650; }
.proof-notes dd { margin: 0; }
@media (max-width:760px) {
  .deck-proof .story-copy { grid-template-columns: minmax(0,1fr); }
  .deck-pair figcaption { font-size: .72rem; }
  .evidence-numbers { margin-top: 1rem; }
}
.deck-pair figure > a { display: flex; justify-content: center; align-items: center; aspect-ratio: 16 / 9; }
.deck-pair figure:first-child img { width: 75%; height: 100%; aspect-ratio: auto; }
.evidence-archive { margin-block: 0 clamp(30px,4vw,58px); }
.evidence-archive .case-depth-body > p { max-width: 62ch; margin: .9rem 0; }
.evidence-archive .gallery-wide { --item-width: clamp(270px, 45%, 570px); --item-height: 370px; }
.evidence-archive .gallery-strip img { width: 100%; }
.evidence-archive .story-links, .deck-file-links .story-links { margin-top: .25rem; }
@media (max-width: 760px) {
  #case-faith .evidence-pair > .story-art { grid-row: 1; }
  #case-faith .evidence-pair > .story-copy { grid-row: 2; }
}