/* Manual writing row; the existing grid remains the no-JavaScript fallback. */
.writing-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.writing-rail-controls{display:flex;gap:8px;flex-shrink:0}
.rail-range{align-self:center;min-width:8ch;color:var(--muted);font:14px/1.4 var(--mono);text-align:right;white-space:nowrap}
.writing-rail-controls[hidden]{display:none}
.writing-rail-controls button{width:40px;height:40px;border:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);font:20px/1 var(--serif);cursor:pointer}
.writing-rail-controls button:hover:not(:disabled){border-color:var(--ink)}
.writing-rail-controls button:disabled{opacity:.3;cursor:default}
.writing-rail-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.writing-carousel-ready .essay-carousel{--rail-gap:38px;--rail-peek:48px;display:flex;gap:var(--rail-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:8px;padding:8px 8px 20px;margin-inline:-8px;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;cursor:grab}
/* The existing8px focus inset also contributes to the visible next-card peek. */
.writing-carousel-ready .essay-carousel>.essay{flex:0 0 calc((100% - var(--rail-gap)*3 - var(--rail-peek) + 8px)/3);scroll-snap-align:start}
.writing-carousel-ready .essay-carousel a,.writing-carousel-ready .essay-carousel img{cursor:inherit}
.writing-carousel-ready .essay-carousel.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.writing-carousel-ready .essay-carousel.is-dragging *{user-select:none}
.writing-carousel-ready .essay-carousel.is-dragging a:hover img{transform:none}
@media(max-width:1000px){.writing-carousel-ready .essay-carousel{--rail-gap:25px;--rail-peek:32px}.writing-carousel-ready .essay-carousel>.essay{flex-basis:calc((100% - var(--rail-gap)*2 - var(--rail-peek) + 8px)/2)}}
@media(max-width:720px){.writing-heading{gap:16px}.rail-range{min-width:6ch}.writing-carousel-ready .essay-carousel{--rail-gap:23px}.writing-carousel-ready .essay-carousel>.essay{flex-basis:86%}}
@media(max-width:390px){.writing-heading{gap:12px}.writing-carousel-ready .essay-carousel{--rail-gap:19px}}
@media(prefers-reduced-motion:reduce){.writing-carousel-ready .essay-carousel{scroll-behavior:auto}}