.skip-link { position: absolute; left: 24px; top: 8px; transform: translateY(-200%); z-index: 10; background: var(--background); padding: 10px; }
.skip-link:focus { transform: none; }
.article-index { margin-top: 0; }
.writing-entry { margin-bottom: 110px; }
.article-link { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(38px, 7vw, 95px); align-items: center; }
.writing-entry:nth-child(even) .article-image { grid-column: 2; grid-row: 1; }
.writing-entry:nth-child(even) .article-copy { grid-column: 1; grid-row: 1; }
.article-image { position: relative; min-width: 0; align-self: start; margin-top: 18px; }
.article-image.artwork { aspect-ratio: 3 / 2; }
.image-window { position: relative; aspect-ratio: 3 / 2; background: color-mix(in oklch, var(--text) 4%, var(--background)); }
.image-window::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in oklch, var(--text) 8%, transparent); pointer-events: none; }
.image-window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-image { --year-scale: 1.25; }
.article-image .release-year { -webkit-mask-size: auto 125%; mask-size: auto 125%; }
.article-link:is(:hover, :focus-visible) .registration { color: var(--article-accent); transform: translateY(-1px); }
.image-failed .surface-bloom, .image-failed .material-canvas, .image-failed .release-year { display: none; }
.image-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 300 24px "Helvetica Neue", sans-serif; color: var(--muted); letter-spacing: .15em; }
.has-image .image-fallback { visibility: hidden; }
.image-failed img { visibility: hidden; }
.image-failed .image-fallback { visibility: visible; }
.article-meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: 10px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; }
.article-copy { min-width: 0; }
.article-copy h2 { font-size: clamp(23px, 2.3vw, 31px); font-weight: 300; letter-spacing: -.035em; line-height: 1.25; margin: 0 0 24px; text-wrap: balance; }
.article-copy h2:has(+ .article-subtitle) { margin-bottom: 10px; }
.article-subtitle { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--text); margin: 0 0 24px; }
.article-excerpt { font-size: 13px; font-weight: 400; line-height: 1.9; color: var(--muted); margin: 0 0 25px; overflow-wrap: anywhere; }
.transcription-word { white-space: nowrap; }
.glyph { position: relative; display: inline-block; }
.writing-enhanced .writing-entry:not(.is-expanded) :is(.excerpt-tail, .subtitle-visual) { visibility: hidden; }
.excerpt-ellipsis { display: inline-block; width: 0; visibility: hidden; }
.writing-enhanced .writing-entry:not(.is-expanded) .excerpt-ellipsis { visibility: visible; }
.glyph.is-resolving { color: transparent; }
.glyph.is-resolving::after { content: attr(data-symbol); position: absolute; inset: 0; color: var(--muted); font-size: .8em; text-align: center; }
.article-continue { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); }
.article-continue span { transition: transform 250ms, color 250ms; }
.article-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 15px; }
.article-link:hover .article-continue span, .article-link:focus-visible .article-continue span { transform: translate(2px, -1px); color: var(--text); }
@media (max-width: 760px) {
  .article-link { grid-template-columns: 1fr; gap: 32px; }
  .writing-entry:nth-child(even) .article-image, .writing-entry:nth-child(even) .article-copy { grid-column: auto; grid-row: auto; }
  .article-image { margin: 0; }
  .writing-entry { margin-bottom: 72px; }
  .article-copy h2 { font-size: 27px; max-width: 26ch; }
}
@media (hover: none) {
  .writing-enhanced .writing-entry:not(.is-expanded) :is(.excerpt-tail, .subtitle-visual) { visibility: visible; }
  .writing-enhanced .writing-entry:not(.is-expanded) .excerpt-ellipsis { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .writing-page *, .writing-page *::after { transition: none !important; }
}