/* Essays reuse the case-study composition, typeface, paper, and reading index. */
.writing-page:not(.about-page) .case-main #case-title,
.writing-page:not(.about-page) .case-story h2 {
    font-family: 'Playwrite GB J',Georgia,'Times New Roman',serif;
    font-weight: 200;
    line-height: 1.5;
    letter-spacing: 0;
}
.writing-page .case-main #case-title {
    font-size: clamp(34px,4.8vw,64px);
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: -.035em;
}
.writing-page .case-main .case-header { max-width: 100%; }
.writing-page .case-sidebar .case-index a,
.writing-page .case-sidebar .case-index a[aria-current="location"] { padding-left: 18px; transition: color .16s ease-out; }
.writing-page .case-index-disclosure > summary { touch-action: manipulation; }
.writing-page .essay-opening { margin-top: 40px; }
.writing-page .essay-content { max-width: 70ch; }
.writing-page .case-main .essay-content p {
    font-size: 18px;
    line-height: 1.8;
    max-width: 65ch;
}
.writing-page .essay-content p + p { margin-top: 20px; }
.writing-page .essay-content strong { font-weight: 500; }
.writing-page .essay-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.writing-page .essay-content a:is(:hover,:focus-visible) { color: var(--accent); }
.writing-page .essay-content a .ua-icon { width: 14px; height: 14px; }
.writing-page .essay-content figure { margin: 36px 0; }
.writing-page .essay-content img {
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
}
.writing-page .essay-content img.portrait-image { max-width: 440px; }
.writing-page .essay-content figcaption {
    margin-top: 12px;
    font-size: 12px;
    color: #62685e;
    line-height: 1.5;
}
.writing-page .essay-content blockquote {
    margin: 32px 0;
    padding-left: 24px;
    border-left: 1px solid var(--line);
    font-size: 23px;
    line-height: 1.5;
    letter-spacing: -.025em;
}
.writing-page .essay-content video {
    display: block;
    width: 100%;
    height: auto;
    margin: 36px 0;
    background: var(--paper);
}
.writing-page .case-bottom {
    display: grid;
    grid-template-columns: minmax(110px,1fr) minmax(0,2fr);
    align-items: start;
    gap: 24px;
    padding-top: 24px;
    margin-top: 48px;
}
.writing-page .case-bottom .case-back {
    justify-self: start;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    min-height: 44px;
}
.writing-page .case-bottom .case-next {
    display: grid;
    grid-template-columns: minmax(0,1fr) 20px;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    text-align: left;
    overflow-wrap: normal;
}
.writing-page .next-essay-copy { display: block; min-width: 0; }
.writing-page .next-essay-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: #62685e;
}
.writing-page .next-essay-title {
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}
.writing-page .case-bottom .ua-icon { width: 18px; height: 18px; }
.writing-page .case-bottom a:is(:hover,:focus-visible) {
    color: var(--ink);
    text-decoration: none;
    background: var(--link-hover-background);
}
@container case-content (max-width:500px) {
    .writing-page .case-bottom { grid-template-columns: minmax(0,1fr); gap: 12px; }
}
@media(max-width:960px) {
    .writing-page .mobile-story-header {
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-left: max(24px,env(safe-area-inset-left));
        padding-right: max(24px,env(safe-area-inset-right));
    }
    .writing-page .case-main #case-title { font-size: clamp(34px,8.5vw,46px); }
    .writing-page .case-main .essay-content p { font-size: 16px; }
    .writing-page .essay-content blockquote { font-size: 21px; padding-left: 16px; }
}