/* North Fork portfolio: dark surfaces, readable project evidence, and responsive cases. */
:root {
  --portfolio-black: #0b0c0e;
  --portfolio-surface: #121416;
  --portfolio-raised: #191c1f;
  --portfolio-line: #34393d;
  --portfolio-white: #f1f3f4;
  --portfolio-text: #c2c7ca;
  --portfolio-muted: #a6aeb3;
}

/* Keep the opening composition and navigation on their existing styles. */
.work,
.approach,
.contact,
.case-dialog {
  --line: var(--portfolio-line);
  color-scheme: dark;
  color: var(--portfolio-white);
}

.work {
  background: var(--portfolio-black);
  padding-bottom: 96px;
}

.approach {
  background: #131517;
  border-block: 1px solid var(--portfolio-line);
}

.contact {
  background: #141618;
  border-top: 1px solid var(--portfolio-line);
}

.work .section-heading,
.approach .section-heading {
  align-items: flex-start;
}

.work .section-intro,
.approach .section-intro {
  max-width: 360px;
  color: var(--portfolio-text);
  font-size: 15px;
  line-height: 1.85;
}

.work .section-intro .mono,
.work .muted,
.work-note {
  color: var(--portfolio-muted);
}

.work .section-heading .eyebrow,
.approach .section-heading .eyebrow,
.contact-copy > .eyebrow {
  color: #bcc3c8;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .09em;
}

/* A concise introduction gives the project selection a clear frame. */
.work-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0 0 42px;
  padding-block: 29px;
  border-block: 1px solid var(--portfolio-line);
}

.brief-item,
.project-copy,
.project-image,
.contact-layout > *,
.form-row > * {
  min-width: 0;
}

.brief-item > span {
  display: block;
  margin-bottom: 10px;
  color: var(--portfolio-muted);
  font-family: var(--mono, Consolas, monospace);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .075em;
}

.brief-item > strong {
  display: block;
  color: var(--portfolio-white);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.brief-item > p {
  margin-top: 10px;
  color: var(--portfolio-text);
  font-size: 14px;
  line-height: 1.8;
}

.work-filter {
  border-color: var(--portfolio-line);
  margin-bottom: 32px;
  gap: 24px;
}

.filter-options {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
}

.filter-button {
  min-height: 52px;
  padding-block: 15px;
  color: var(--portfolio-muted);
  font-size: 13px;
  line-height: 1.6;
}

.filter-button.active,
.filter-button:hover {
  color: var(--portfolio-white);
}

.filter-button.active {
  border-color: #e4e9ec;
}

.filter-button sup {
  font-size: 10px;
}

#work-count {
  color: var(--portfolio-muted);
  font-size: 10px;
  line-height: 1.65;
}

/* Project cards retain native details behavior when scripting is unavailable. */
.project-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.project {
  min-width: 0;
  border: 1px solid var(--portfolio-line);
  background: var(--portfolio-surface);
  color: var(--portfolio-white);
  transition: border-color .2s ease, background .2s ease;
}

.project-grid > .project-featured,
.project-grid.filtered > .project-featured {
  grid-column: span 12;
}

.project-grid > .project-half,
.project-grid.filtered > .project-half {
  grid-column: span 6;
}

.project > summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  list-style: none;
}

.project:not([open]) > summary {
  height: 100%;
}

.project > summary:focus-visible {
  outline: 2px solid #eef2f4;
  outline-offset: 5px;
}

.project-image {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--portfolio-line);
  background-color: #0e1012;
  isolation: isolate;
}

.project-image > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.project-image.analysis-image {
  background: #0e1012;
}

.project-image.analysis-image > img {
  object-fit: contain;
  object-position: center;
  padding: 16px;
}

.project-image.illustration-image > img,
.project-image.industrial-image > img {
  object-fit: contain;
  object-position: center;
  padding: 22px;
}

.project-image.analysis-image > img,
.project-image.illustration-image > img,
.project-image.industrial-image > img {
  transition: opacity .2s ease;
}

.project summary:hover .analysis-image > img,
.project summary:hover .illustration-image > img,
.project summary:hover .industrial-image > img {
  transform: none;
}

.image-label,
.image-note,
.modular-image .image-label,
.modular-image .image-note {
  left: 16px;
  max-width: calc(100% - 78px);
  background: rgba(9, 11, 13, .86);
  padding: 5px 8px;
  color: #e2e6e8;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .045em;
}

.image-label {
  top: 16px;
}

.image-note {
  bottom: 15px;
}

.image-corner {
  width: 46px;
  height: 46px;
  background: #e7ecef;
  color: #101214;
}

.project summary:hover .image-corner {
  background: #fff;
  color: #101214;
}

.project-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
}

.project-copy > .eyebrow {
  margin-bottom: 13px;
  color: var(--portfolio-muted);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: .07em;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 17px;
  max-width: 100%;
}

.project-tags span {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #3c4247;
  background: #1a1d20;
  color: #c6cdd1;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}

.project-copy h3 {
  max-width: 100%;
  margin-bottom: 15px;
  color: var(--portfolio-white);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.04em;
}

.project-copy > p:not(.eyebrow),
.project-outcome p {
  max-width: 65ch;
  min-height: 0;
  color: var(--portfolio-text);
  font-size: 14px;
  line-height: 1.85;
}

.project-copy > .project-role,
.project-role {
  margin-top: 17px;
  color: #bbc3c8;
  font-size: 14px;
  line-height: 1.8;
}

.project-role strong {
  color: #e5eaed;
  font-weight: 600;
}

.project-outcome {
  align-self: stretch;
  width: 100%;
  margin-top: 21px;
  padding-top: 17px;
  border-top: 1px solid var(--portfolio-line);
}

.project-outcome > strong {
  display: block;
  margin-bottom: 7px;
  color: #e6ebee;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
}

.project-action {
  min-height: 44px;
  margin-top: auto;
  padding-top: 22px;
  color: #f0f4f6;
  font-size: 14px;
  line-height: 1.6;
  gap: 14px;
}

.project-action .icon {
  width: 18px;
  height: 18px;
}

.project-featured > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}

.project-featured .project-image {
  height: 100%;
  min-height: 440px;
  aspect-ratio: auto;
  align-self: stretch;
  border-bottom: 0;
  border-right: 1px solid var(--portfolio-line);
}

.project-featured .project-copy {
  padding: 36px;
}

.project-featured .project-copy h3 {
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.13;
}

.project-featured .project-copy > p:not(.eyebrow) {
  font-size: 15px;
}

.project > .case-content {
  margin-top: 0;
  padding: 28px;
  border-top: 1px solid var(--portfolio-line);
  background: #15181b;
}

.project > .case-content h2 {
  font-size: 30px;
}

.work-proof {
  margin-top: 35px;
  padding: 26px 28px;
  border: 1px solid var(--portfolio-line);
  background: #14171a;
  color: var(--portfolio-text);
  font-size: 15px;
  line-height: 1.85;
}

.work-proof p {
  max-width: 90ch;
  font-size: inherit;
  line-height: inherit;
}

.work-proof p + p {
  margin-top: 12px;
}

.work-proof strong {
  color: #eef2f4;
  font-weight: 600;
}

.work-proof > .text-link {
  min-height: 44px;
  margin-top: 15px;
  color: #eef2f4;
  font-size: 14px;
}

.work-note {
  font-size: 13px;
  line-height: 1.8;
}

/* Keep the original miniature workflow illustrations legible on dark cards. */
.project-image.tool-image {
  background: #1a1d20;
  min-height: 320px;
  padding: 36px 30px;
}

.requirements-art {
  background: #f3f4f4;
  border-color: #aeb7bd;
  box-shadow: 10px 12px 0 #30363b;
}

.requirements-art .mini-mark {
  background: #15181b;
  color: #f4f5f6;
}

.project-image.review-image {
  background: #1b1e21;
  padding: 40px 34px;
}

.review-art {
  max-width: 430px;
}

.review-stages,
.review-bottom {
  color: #c5ccd1;
}

/* The same case structure is styled both inline and in the accessible drawer. */
.case-dialog {
  width: min(900px, 96vw);
  max-width: 900px;
  background: #121518;
  border-left: 1px solid #42494e;
  box-shadow: -24px 0 80px #0008;
}

.case-dialog::backdrop {
  background: rgba(0, 0, 0, .78);
}

.dialog-top {
  padding: 18px 36px;
  background: #171b1e;
  border-bottom-color: var(--portfolio-line);
  z-index: 3;
}

.dialog-top > .mono {
  color: #bac3c9;
  font-size: 10px;
  line-height: 1.65;
}

.dialog-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid #424a50;
  background: #23292e;
  color: #f1f4f6;
}

.dialog-close:hover {
  border-color: #c3cdd4;
  background: #313941;
}

.dialog-close:focus-visible,
.case-dialog a:focus-visible {
  outline: 2px solid #f1f4f6;
  outline-offset: 4px;
}

.dialog-body {
  padding: 40px 44px 20px;
  overflow-wrap: break-word;
}

:is(.case-content, .dialog-body) > .eyebrow {
  color: #b4bec5;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .07em;
}

:is(.case-content, .dialog-body) h2 {
  color: var(--portfolio-white);
  font-size: clamp(34px, 4.2vw, 48px);
  line-height: 1.13;
  letter-spacing: -.045em;
}

:is(.case-content, .dialog-body) h3 {
  margin: 30px 0 12px;
  color: #edf1f3;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.025em;
}

:is(.case-content, .dialog-body) p,
:is(.case-content, .dialog-body) li {
  color: #c3ccd2;
  font-size: 15px;
  line-height: 1.9;
}

:is(.case-content, .dialog-body) .case-lead {
  max-width: 70ch;
  margin: 22px 0 28px !important;
  color: #d8e0e5;
  font-size: 18px !important;
  line-height: 1.75 !important;
}

dl.case-meta,
.case-meta dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 26px 0 30px;
  padding-block: 22px;
  border-block: 1px solid var(--portfolio-line);
}

.case-meta > div,
.case-meta dl > div {
  min-width: 0;
}

.case-meta dt {
  color: var(--portfolio-muted);
  font-family: var(--mono, Consolas, monospace);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .045em;
}

.case-meta dd {
  margin: 8px 0 0;
  color: #e4eaee;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.case-result {
  margin-block: 30px;
  padding: 24px 26px;
  border: 1px solid #394248;
  border-left: 3px solid #c3ced5;
  background: #1b2227;
}

:is(.case-content, .dialog-body) .case-result h3 {
  margin: 0 0 11px;
  color: #f0f4f7;
  font-size: 19px;
  line-height: 1.4;
}

:is(.case-content, .dialog-body) .case-result p {
  color: #d9e2e8;
  font-size: 15px;
  line-height: 1.85;
}

.case-sections {
  max-width: 75ch;
  margin-block: 28px;
}

.case-sections p + p {
  margin-top: 16px;
}

:is(.case-content, .dialog-body) ul {
  margin: 0;
  padding-left: 22px;
}

:is(.case-content, .dialog-body) li + li {
  margin-top: 9px;
}

.case-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-block: 32px;
}

:is(.case-content, .dialog-body) figure {
  min-width: 0;
  margin: 30px 0;
}

:is(.case-content, .dialog-body) .case-gallery figure {
  margin: 0;
}

:is(.case-content, .dialog-body) figure img,
.case-gallery img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #0b0e10;
  border: 1px solid #343d44;
}

:is(.case-content, .dialog-body) figcaption {
  margin-top: 12px;
  color: #adb9c1;
  font-size: 14px;
  line-height: 1.8;
}

:is(.case-content, .dialog-body) .case-provenance {
  display: block;
  margin: 8px 0;
  color: #c0cbd2;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .015em;
}

.figure-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding-block: 8px;
  color: #e4ecf1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #8c9ca7;
  overflow-wrap: anywhere;
}

.figure-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.dialog-bottom {
  margin: 10px 44px 40px;
  padding-top: 27px;
  border-top-color: var(--portfolio-line);
}

.dialog-bottom > p {
  color: #dce5eb;
  font-size: 16px;
  line-height: 1.7;
}

.dialog-bottom .button {
  min-height: 54px;
  font-size: 14px;
}

/* Continuous dark surfaces through the process and contact sections. */
.process-step {
  border-top-color: #485057;
}

.step-number,
.step-number .icon {
  color: #bec8cf;
}

.step-number {
  font-size: 13px;
}

.process-step h3 {
  color: #f0f4f6;
  font-size: 22px;
  line-height: 1.25;
}

.process-step p {
  max-width: 30ch;
  color: var(--portfolio-text);
  font-size: 14px;
  line-height: 1.85;
}

.expertise-detail p,
.expertise-heading > p:not(.eyebrow),
.about-copy > p:not(.eyebrow),
.analysis-showcase p {
  font-size: 14px;
}

.expertise-detail ul {
  font-size: 14px;
  line-height: 1.75;
}

.analysis-showcase figcaption {
  font-size: 12px;
  line-height: 1.8;
}

.modular-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
  margin-top: 58px;
  padding-top: 48px;
  border-top: 1px solid var(--portfolio-line);
}

.modular-showcase figure,
.modular-showcase-copy {
  min-width: 0;
}

.modular-showcase figure {
  margin: 0;
}

.modular-showcase figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: #101214;
  border: 1px solid var(--portfolio-line);
}

.modular-showcase figcaption {
  margin-top: 12px;
  color: var(--portfolio-muted);
  font-size: 12px;
  line-height: 1.8;
}

.modular-showcase-copy > .eyebrow {
  color: #bec6cb;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .075em;
}

.modular-showcase-copy h3 {
  margin: 15px 0 20px;
  color: var(--portfolio-white);
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.modular-showcase-copy > p:not(.eyebrow) {
  color: var(--portfolio-text);
  font-size: 14px;
  line-height: 1.85;
}

.contact-copy > p:not(.eyebrow),
.contact-meta a,
.contact-meta p {
  color: var(--portfolio-text);
  font-size: 14px;
  line-height: 1.85;
}

.contact-email {
  color: #f0f4f7;
  border-bottom-color: #56616a;
  line-height: 1.6;
}

.contact-email:hover,
.contact-meta a:hover {
  color: #fff;
}

.contact-meta span {
  color: #aebbc4;
  font-size: 11px;
  line-height: 1.6;
}

.contact-form {
  border-color: var(--portfolio-line);
}

.contact-form h3 {
  color: var(--portfolio-white);
  font-size: 22px;
  line-height: 1.35;
}

.field label {
  margin-bottom: 10px;
  color: #e1e9ee;
  font-size: 14px;
  line-height: 1.6;
}

.field label span {
  color: #bdccd6;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 51px;
  padding: 12px 13px;
  border: 1px solid #66717a;
  border-radius: 0;
  background: #0e1317;
  color: #eff5f9;
  font-size: 16px;
  line-height: 1.6;
  color-scheme: dark;
  transition: border-color .2s ease, background .2s ease;
}

.field select {
  padding-right: 30px;
}

.field select option {
  background: #11181e;
  color: #eff5f9;
}

.field textarea {
  min-height: 145px;
  max-height: none;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a7b6c0;
  opacity: 1;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #899ca9;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid #e2eff8;
  outline-offset: 3px;
  border-color: #d0e1ed;
  background: #151d23;
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #eff5f9;
  box-shadow: 0 0 0 1000px #141d24 inset;
  caret-color: #eff5f9;
}

.form-note,
.form-alternative {
  color: #b5c3cd;
  font-size: 14px;
  line-height: 1.8;
}

.form-alternative a {
  color: #edf5fa;
}

.form-feedback {
  padding: 14px 16px;
  border-left: 2px solid #c5d7e4;
  background: #222e37;
  color: #e3edf4;
  font-size: 14px;
  line-height: 1.8;
}

.contact .button-dark,
.case-dialog .button-dark,
.utility .button,
.utility-page .button,
.main .actions .button {
  border: 1px solid #e8eef2;
  background: #edf3f7;
  color: #0d1419;
}

.contact .button-dark:hover,
.case-dialog .button-dark:hover,
.utility .button:hover,
.utility-page .button:hover,
.main .actions .button:hover {
  border-color: #fff;
  background: #fff;
  color: #0d1419;
}

.form-submit {
  min-height: 58px;
  font-size: 14px;
}

.utility .secondary,
.utility-page .secondary,
.main .actions .secondary {
  color: #dce5eb;
}

@media (hover: hover) {
  .project:hover {
    border-color: #788791;
    background: #171c20;
  }
}

@media (max-width: 1100px) {
  .work-brief {
    gap: 24px;
  }

  .project-grid {
    gap: 24px;
  }

  .project-copy,
  .project-featured .project-copy {
    padding: 26px;
  }

  .project-copy h3 {
    font-size: 26px;
  }

  .project-featured .project-copy h3 {
    font-size: 33px;
  }
}

@media (max-width: 960px) {
  .project-featured > summary {
    display: flex;
    flex-direction: column;
  }

  .project-featured .project-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--portfolio-line);
  }

  .project-featured .project-copy {
    padding: 30px;
  }

  .project-copy h3 {
    font-size: 24px;
  }

  .project-image.tool-image,
  .project-image.review-image {
    padding: 26px 22px;
  }

  .project-image.tool-image .requirements-art,
  .project-image.review-image .review-art {
    transform: none;
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px 30px;
  }

  .process-step p {
    max-width: 42ch;
  }

  .modular-showcase {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 30px;
  }

  .modular-showcase-copy h3 {
    font-size: 26px;
  }

  .case-dialog {
    width: min(860px, 98vw);
  }
}

@media (max-width: 760px) {
  .work {
    padding-bottom: 64px;
  }

  .work .section-intro,
  .approach .section-intro {
    max-width: 55ch;
    font-size: 14px;
  }

  .work-brief {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 30px;
    padding-block: 25px;
  }

  .brief-item + .brief-item {
    padding-top: 24px;
    border-top: 1px solid #2f373d;
  }

  .brief-item > p {
    max-width: 60ch;
  }

  .work-filter {
    gap: 14px;
    margin-bottom: 25px;
  }

  .filter-options {
    gap: 0 20px;
  }

  .filter-button {
    min-height: 48px;
    font-size: 12px;
    padding-block: 13px;
  }

  .project-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 26px;
  }

  .project-grid > .project,
  .project-grid.filtered > .project {
    grid-column: span 12;
  }

  .project-copy,
  .project-featured .project-copy {
    padding: 26px;
  }

  .project-copy h3 {
    font-size: 28px;
  }

  .project-featured .project-copy h3 {
    font-size: 33px;
  }

  .project-copy > p:not(.eyebrow),
  .project-featured .project-copy > p:not(.eyebrow),
  .project-outcome p {
    font-size: 14px;
  }

  .project-image,
  .project-featured .project-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .project-image.tool-image,
  .project-image.review-image {
    padding: 34px 28px;
  }

  .work-proof {
    margin-top: 27px;
    padding: 23px 25px;
    font-size: 14px;
  }

  .case-dialog {
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
  }

  .dialog-top {
    padding: 14px 24px;
  }

  .dialog-body {
    padding: 30px 28px 16px;
  }

  .dialog-body h2 {
    font-size: clamp(31px, 5.6vw, 41px);
  }

  :is(.case-content, .dialog-body) .case-lead {
    font-size: 17px !important;
  }

  dl.case-meta,
  .case-meta dl {
    gap: 18px;
  }

  .case-result {
    padding: 22px;
  }

  .dialog-bottom {
    margin: 14px 28px 34px;
  }

  .contact-form h3 {
    font-size: 22px;
  }

  .contact-email {
    font-size: 17px;
  }

  .contact-meta a,
  .contact-meta p,
  .process-step p {
    font-size: 14px;
  }

  .modular-showcase {
    display: block;
    margin-top: 46px;
    padding-top: 35px;
  }

  .modular-showcase figure {
    margin-bottom: 28px;
  }

  .modular-showcase-copy {
    max-width: 60ch;
  }

  .modular-showcase-copy h3 {
    font-size: 29px;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .step-number {
    margin-bottom: 18px;
  }

  .process-step p {
    max-width: 55ch;
  }

  dl.case-meta,
  .case-meta dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }

  .case-meta dd {
    margin-top: 5px;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

@media (max-width: 420px) {
  .work .section-heading .eyebrow,
  .approach .section-heading .eyebrow,
  .contact-copy > .eyebrow {
    font-size: 10px;
  }

  .filter-options {
    gap: 0 18px;
  }

  .project-copy,
  .project-featured .project-copy {
    padding: 22px 20px;
  }

  .project-copy h3,
  .project-featured .project-copy h3 {
    font-size: 27px;
    line-height: 1.18;
  }

  .project-copy > .eyebrow {
    font-size: 10px;
  }

  .project-tags {
    gap: 6px;
  }

  .project-tags span {
    padding: 4px 7px;
    font-size: 11px;
  }

  .project-image,
  .project-featured .project-image {
    aspect-ratio: 4 / 3;
  }

  .project-image.analysis-image > img {
    padding: 10px;
  }

  .image-label,
  .image-note,
  .modular-image .image-label,
  .modular-image .image-note {
    left: 10px;
    max-width: calc(100% - 67px);
    padding: 4px 6px;
    font-size: 9px;
  }

  .image-label {
    top: 10px;
  }

  .image-note {
    bottom: 10px;
  }

  .project-image.tool-image,
  .project-image.review-image {
    padding: 25px 19px;
  }

  .requirements-art {
    box-shadow: 6px 7px 0 #30363b;
  }

  .review-track span {
    width: 49px;
    height: 49px;
    flex-shrink: 0;
  }

  .review-track i {
    min-width: 8px;
    margin-inline: 7px;
  }

  .review-stages {
    font-size: 8px;
    line-height: 1.7;
    letter-spacing: .015em;
  }

  .review-bottom {
    font-size: 7px;
    line-height: 1.7;
    gap: 10px;
  }

  .work-proof {
    padding: 22px 20px;
  }

  .contact-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .contact-email {
    font-size: 16px;
  }

  .dialog-top {
    padding: 12px 18px;
    gap: 14px;
  }

  .dialog-top > .mono {
    font-size: 9px;
    letter-spacing: .025em;
  }

  .dialog-body {
    padding: 28px 20px 14px;
  }

  .dialog-body h2 {
    font-size: 32px;
  }

  :is(.case-content, .dialog-body) .case-lead {
    font-size: 16px !important;
  }

  :is(.case-content, .dialog-body) p,
  :is(.case-content, .dialog-body) li {
    font-size: 14px;
  }

  :is(.case-content, .dialog-body) h3 {
    font-size: 21px;
  }

  :is(.case-content, .dialog-body) figcaption {
    font-size: 14px;
  }

  .project > .case-content {
    padding: 24px 19px;
  }

  .project > .case-content h2 {
    font-size: 27px;
  }

  .case-result {
    padding: 20px 18px;
  }

  .dialog-bottom {
    margin: 14px 20px 30px;
  }

  .dialog-bottom .button {
    width: 100%;
    gap: 20px;
  }
}

@media (max-width: 360px) {
  .project-copy,
  .project-featured .project-copy {
    padding-inline: 18px;
  }

  .project-copy h3,
  .project-featured .project-copy h3 {
    font-size: 25px;
  }

  .project-tags span {
    font-size: 10px;
  }

  .project-image.review-image {
    padding-inline: 15px;
  }

  .review-track span {
    width: 46px;
    height: 46px;
  }

  .review-track i {
    margin-inline: 5px;
  }

  .dialog-body h2 {
    font-size: 30px;
  }
}

@media print {
  .work,
  .approach,
  .contact,
  .project,
  .project-copy,
  .work-brief,
  .work-proof {
    background: #fff !important;
    color: #000 !important;
  }

  .work *,
  .approach *,
  .contact * {
    color: inherit !important;
    border-color: #ccc !important;
  }

  .project-grid,
  .work-brief,
  .project > summary,
  .project-featured > summary {
    display: block;
  }

  .project {
    border: 0;
  }
}

/* Keep filter feedback available to assistive technology on small phones. */
@media (max-width: 420px) {
  #work-count {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}