/* Creative story brought into the folio system: a paper reading page with
   one accent per chapter, the shared header, and no tilting frames. */
.atelier-page { --mono: var(--f-latin); --sans: var(--f-sans); --accent: #b8323b; --f-accent: #b8323b; background: var(--f-paper); color: var(--f-on-paper); font-family: var(--f-sans); }
.atelier-page .eyebrow { font-family: var(--f-latin); font-stretch: 112%; letter-spacing: .16em; }
.story-rail { top: 60px; }
html:has(.atelier-page) { scroll-padding-top: 0; }
.story-chapter, .story-references { scroll-margin-top: 140px; }
.story-cover h1 { letter-spacing: -.03em; line-height: 1.3; }
.story-cover-photo { padding: 0; background: none; box-shadow: none; }
.story-cover-photo::before { left: auto; right: -5%; top: 5%; bottom: 8%; width: 70%; height: auto; background: var(--accent); clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.story-craft-photo { padding: 0; background: none; }
.quote-slash { transform: none; font-family: var(--f-latin); }
[data-spatial] { transform: none !important; }
@media (max-width: 860px) { .story-rail { top: 60px; } }
@media (max-width: 640px) { .story-rail { top: 80px; } .story-chapter, .story-references { scroll-margin-top: 196px; } }

/* Japanese never needs italics; the folio has one Latin face. */
.atelier-page { --display: var(--f-latin); }
.atelier-page *, .atelier-page *::before, .atelier-page *::after { font-style: normal; }
.imagine-book h3, .story-media-link::before, .reading-links a::before, .circle-record h4 { font-family: var(--f-latin); font-stretch: 116%; letter-spacing: -.02em; }

/* Cover: the four chapters as doors, in the same slash grammar as "her four". */
.chapter-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: stretch; min-height: 520px; }
.chapter-door { --cut: clamp(18px, 2.2vw, 34px); position: relative; display: block; margin-left: calc(var(--cut) * -1 + 6px); text-decoration: none; color: var(--f-on-paper); }
.chapter-door:first-child { margin-left: 0; }
.door-image { position: absolute; inset: 0 0 46px; overflow: hidden; background: var(--f-ink); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.chapter-door:first-child .door-image { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.door-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: transform .8s var(--f-ease), filter .5s; filter: saturate(.85); }
.chapter-door:hover .door-image img, .chapter-door:focus-visible .door-image img { transform: scale(1.05); filter: none; }
.door-label { position: absolute; left: var(--cut); right: 0; bottom: 0; display: flex; gap: 8px; align-items: baseline; font: 700 13px/1.4 var(--f-sans); }
.door-label b { font: 800 22px/1 var(--f-latin); font-stretch: 118%; color: var(--accent); }
.chapter-door:first-child .door-label { left: 0; }

/* Chapter 1: the garment beside her words about it. */
.attachment-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: start; }
.story-garment { margin: 0; }
.story-garment img { display: block; width: 100%; height: auto; }
.story-garment figcaption { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; font: 600 10px/1.6 var(--f-latin); letter-spacing: .08em; }
.attachment-copy { display: grid; gap: 34px; }
.garment-pointer { margin: 0; font-size: 13px; }
.garment-pointer a { font-weight: 700; }

/* Detail lenses become cuts: same window as every other detail on the site. */
.detail-lens > div { border-radius: 0; border: 0; aspect-ratio: 4 / 3; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); box-shadow: none; }
.making-art .detail-lens > div { width: 110px; }

@media (max-width: 900px) {
  .chapter-doors { min-height: 360px; }
  .attachment-layout { grid-template-columns: 1fr; }
  .story-garment { width: min(100%, 420px); }
}
@media (max-width: 640px) {
  .chapter-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; row-gap: 12px; min-height: 0; }
  .chapter-door:nth-child(3) { margin-left: 0; }
  .chapter-door:nth-child(3) .door-image { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
  .chapter-door:nth-child(3) .door-label { left: 0; }
}

/* The record turns with the reader's own scroll, and only then: no loop, no autoplay. */
@supports (animation-timeline: view()) {
  .record-art .vinyl { animation: record-turn linear both; animation-play-state: running; animation-timeline: view(); animation-range: cover; }
}
@media (prefers-reduced-motion: reduce) {
  .record-art .vinyl { animation: none; }
}