/* Case pages (site/cases/<slug>/). Builds on site.css tokens; one template for every case. */

.case-nav { position: fixed; inset: 0 0 auto; z-index: 11; display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad); height: 4.5rem; background: var(--off-white); }
.case-nav .nav__links { position: absolute; left: 50%; transform: translateX(-50%); }
.case-nav__right { display: flex; align-items: center; gap: .75rem; }

.case { padding: 9rem var(--pad) 0; }

/* header: meta column on the left, the title carries the page */
.case-head { display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem 3rem; align-items: start; }
.case-back { font-size: .875rem; color: var(--dark-gray); display: inline-flex; gap: .4rem; align-items: center; transition: color .2s; }
.case-back:hover { color: var(--black); }
.case-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1.4rem; }
.case-title { margin: 0; font-size: 4.6rem; font-weight: 600; line-height: .96; letter-spacing: -.18rem; max-width: 15ch; text-wrap: balance; }
.case-lede { margin: 2rem 0 0; max-width: 34rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.02rem; }

/* the facts, one quiet row */
.case-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 4.5rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--medium-gray); }
.case-facts dt { font-size: .75rem; color: var(--dark-gray); margin-bottom: .35rem; }
.case-facts dd { margin: 0; font-size: .9375rem; line-height: 1.35; }

/* the artefact: the real output, full bleed inside the gutter */
.case-artefact { margin: 3rem 0 0; background: var(--black); color: #f4f4f2; border-radius: var(--rad-12); overflow: hidden; }
.case-artefact__bar { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid #ffffff14;
  font-size: .75rem; color: #9b9b97; }
.case-artefact pre { margin: 0; padding: 2rem 1.25rem 2.4rem; overflow-x: auto; font: 400 .9rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0; white-space: pre-wrap; }
.case-artefact pre b { color: var(--accent); font-weight: 500; }
.case-artefact figcaption { padding: 0 1.25rem 1.2rem; font-size: .8125rem; color: #9b9b97; }

/* body: grey code-comment labels on the left, reading column on the right */
.case-body { margin-top: 7rem; }
.case-sec { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem 3rem; padding: 2.4rem 0 3.4rem; border-top: 1px solid var(--light-gray); }
.case-sec__label { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02rem; color: var(--medium-gray); }
.case-sec__text { max-width: 40rem; }
.case-sec__text p { margin: 0 0 1.1rem; font-size: 1.25rem; line-height: 1.4; letter-spacing: -.01rem; }
.case-sec__text p:last-child { margin-bottom: 0; }
.case-sec__text q { font-weight: 600; quotes: "\201C" "\201D"; }
.case-sec__big { font-size: 2rem !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -.05rem !important; }

/* specimen pairs: before and after, read across */
.pairs { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--light-gray); }
.pair { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--light-gray); align-items: baseline; }
.pair__name { font-size: .8125rem; font-weight: 600; }
.pair__before { font-size: .9375rem; line-height: 1.4; color: var(--dark-gray); text-decoration: line-through; text-decoration-color: #9b9b9b99; }
.pair__after { font-size: .9375rem; line-height: 1.4; }

/* download: the one contrast moment on the page */
.case-get { margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 22rem; gap: 3rem; align-items: center;
  background: var(--black); color: var(--off-white); border-radius: var(--rad-12); padding: 3.5rem 3rem; }
.case-get__title { margin: 0; font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.1rem; max-width: 14ch; }
.case-get__p { margin: 1.2rem 0 2rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.4; color: #cfcfcb; }
.case-get .btn { background: var(--accent); color: var(--black); border-color: var(--accent); }
.case-get__preview { display: block; width: 100%; height: auto; border-radius: var(--rad-6); transform: rotate(2.5deg);
  box-shadow: 0 30px 60px #00000059; }

.case-more { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 3rem 0 2.5rem; margin-top: 5rem;
  border-top: 1px solid var(--light-gray); font-size: .9375rem; }
.case-more a { text-decoration: underline; text-underline-offset: 3px; }
.case-foot { display: flex; justify-content: space-between; padding: 1.25rem 0; font-size: .813rem; color: var(--dark-gray); }

@media (max-width: 991px) {
  .case-nav .nav__links { display: none; }
  .case-head, .case-sec { grid-template-columns: 1fr; }
  .case-title { font-size: 3.4rem; letter-spacing: -.1rem; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-get { grid-template-columns: 1fr; }
  .case-get__preview { max-width: 20rem; }
}
@media (max-width: 767px) {
  .case { padding: 6.5rem .75rem 0; }
  .case-nav { padding: .75rem; }
  .case-title { font-size: 2.4rem; letter-spacing: -.06rem; }
  .case-lede { font-size: 1.15rem; }
  .case-artefact pre { font-size: .72rem; }
  .case-sec__text p { font-size: 1.05rem; }
  .case-sec__big { font-size: 1.5rem !important; }
  .pair { grid-template-columns: 1fr; gap: .35rem; }
  .case-get { padding: 2rem 1.25rem; }
  .case-get__title { font-size: 2.2rem; }
  .case-more, .case-foot { flex-direction: column; }
}

/* the brief as rows: holds its columns at every width */
.brief { padding: 1.8rem 1.25rem 2.2rem; font: 400 .9rem/1.6 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
.brief__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .15rem 0; max-width: 52rem; }
.brief__row b { color: var(--accent); font-weight: 500; }
.case-artefact__bar { flex-wrap: wrap; gap: .25rem 1rem; }
@media (max-width: 767px) {
  .brief { font-size: .74rem; padding: 1.2rem 1rem 1.5rem; }
  .brief__row { grid-template-columns: 1fr; gap: 0; padding: .35rem 0; }
}

/* generated case pages (tools/build-cases.py): kicker, body next to the visual, the number, the free download form */
.case-kicker { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; color: var(--dark-gray); letter-spacing: -.01rem; }
.case-main { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 3rem; align-items: start; margin-top: 4rem; }
.case-main .case-body { margin-top: 0; }
.case-main .case-sec { grid-template-columns: 13.5rem 1fr; gap: 1rem 2rem; }
.case-visual { margin: 0; position: sticky; top: 6rem; }
.case-visual img { display: block; width: 100%; height: auto; border-radius: var(--rad-12); }
.case-list { margin: 0; padding-left: 1.2rem; font-size: 1.25rem; line-height: 1.4; }
.case-list li + li { margin-top: .6rem; }
.case-num { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.4rem !important; }
.case-num b { font-size: 4rem; font-weight: 600; line-height: .9; letter-spacing: -.15rem; }
.case-num span { font-size: 1rem; color: var(--dark-gray); }
.case-logo { display: block; height: 2rem; width: auto; margin-top: 1.6rem; }
.case-get__kind { margin: 0 0 1rem; font-size: .8125rem; color: #9b9b97; }
.get-form { max-width: 34rem; }
.get-form__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.get-form input[type=email] { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1rem; padding: .85rem 1.1rem; border-radius: 999px;
  border: 1px solid #ffffff33; background: #ffffff0f; color: var(--off-white); }
.get-form input[type=email]::placeholder { color: #9b9b97; }
.get-form input[type=email]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.get-form__consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-size: .8125rem; line-height: 1.45; color: #cfcfcb; cursor: pointer; }
.get-form__consent input { margin-top: .2rem; accent-color: var(--accent); width: 1rem; height: 1rem; flex: 0 0 auto; }
.get-form__consent a { color: inherit; text-decoration: underline; }
.get-form__msg { min-height: 1.2rem; margin: .8rem 0 0; font-size: .875rem; color: var(--accent); }
.get-done { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.get-done p { margin: 0; color: #cfcfcb; font-size: 1rem; }
.get-file { background: #2a2a28; border-radius: var(--rad-6); overflow: hidden; transform: rotate(2deg); box-shadow: 0 30px 60px #00000059; }
.get-file__bar { display: flex; justify-content: space-between; padding: .7rem 1rem; font-size: .75rem; color: #9b9b97; border-bottom: 1px solid #ffffff14; }
.get-file pre { margin: 0; padding: 1rem; font: 400 .74rem/1.55 ui-monospace, "SF Mono", Menlo, monospace; color: #e8e8e4; white-space: pre-wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.case-foot a { color: inherit; }
@media (max-width: 991px) {
  .case-main { grid-template-columns: 1fr; }
  .case-main .case-sec { grid-template-columns: 1fr; }
  .case-visual { position: static; order: -1; max-width: 26rem; }
}
@media (max-width: 767px) {
  .case-list { font-size: 1.05rem; }
  .case-num b { font-size: 3rem; }
}