/* Reading-state refinements layered over chapters.css (Asad's chapter layouts). */
.reading .chapter-title,.reading .statement-title { font-family:"Bodoni Moda",Georgia,serif; font-weight:400; letter-spacing:0; }
.reading [data-fly] { display:inline-block; }
.reading [data-fly].is-waiting { visibility:hidden; }
.reading .exhibit-visual { top:28px; }
.reading .detail-image { height:auto; aspect-ratio:auto; }
.reading .art-pair { cursor:pointer; }
.reading .study-notice { margin:14px 0 0; font-size:12px; line-height:1.6; color:rgba(33,28,22,.65); }
.reading .art-pair.is-art .scarf-overview { opacity:0; }
.reading .contact-link { display:inline-flex; gap:24px; align-items:center; width:max-content; min-height:44px; margin-top:28px; border-bottom:1px solid rgba(84,63,36,.35); font-size:18px; }
.reading[data-chapter="statement"] .artist-invitation { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 7vw; margin-top:8px; padding-top:32px; border-top:1px solid var(--line); }
.artist-invitation-kicker { margin:0 0 12px; font:var(--t-label)/1.7 "IBM Plex Mono",monospace; letter-spacing:var(--t-label-track); text-transform:uppercase; color:var(--ink-label); }
.artist-invitation-title { margin:0; max-width:14ch; font-family:"Bodoni Moda",Georgia,serif; font-weight:400; font-size:clamp(30px,3.2vw,42px); line-height:1.15; text-wrap:balance; }
.artist-invitation-lead { margin:0; max-width:34ch; font-size:var(--t-lead); line-height:var(--t-lead-lh); color:var(--ink-soft); text-wrap:pretty; }
.artist-invitation-prose { margin:18px 0 0; max-width:42ch; font-size:var(--t-body); line-height:var(--t-body-lh); color:var(--ink-soft); text-wrap:pretty; }
.artist-invitation-prose a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.artist-invitation-prose a:hover,.artist-invitation-prose a:focus-visible { color:var(--rust); }
.reading[data-chapter="statement"] .principles-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:700px) {
  .reading[data-chapter="statement"] .artist-invitation { grid-template-columns:1fr; gap:20px; padding-top:28px; }
  .reading[data-chapter="statement"] .principles-grid { grid-template-columns:1fr; }
}
.reading .scarf-artwork,.reading .scarf-overview { pointer-events:none; }
.reading .founder-role { margin:2px 0 0; max-width:26ch; font-size:var(--t-small); line-height:var(--t-small-lh); color:var(--ink-soft); text-wrap:pretty; }

/* Step 10 (in review): the service notes — Contact, Privacy and Site notes — on the same cloth under a top
   rim. A note is one column on the chapter scale; its sub-headings take the founders' name size; the
   studio's email is set as a line. The ghost is the page as it stood, left on the screen to be pushed off
   while a note takes its place. */
.reading[data-kind="note"] .reading-body { max-width:1100px; }
.note-sheet { max-width:66ch; }
.note-kicker,.note-date,.preview-bar,.note-colophon { margin:0; font:var(--t-label)/1.7 "IBM Plex Mono",monospace; letter-spacing:var(--t-label-track); text-transform:uppercase; color:var(--ink-label); }
.note-title { margin:18px 0 20px; font-family:"Bodoni Moda",Georgia,serif; font-weight:400; font-size:var(--t-title); line-height:var(--t-title-lh); letter-spacing:0; text-wrap:balance; }
.note-date { margin:-8px 0 20px; }
.note-lead { margin:0; font-size:var(--t-lead); line-height:var(--t-lead-lh); color:var(--ink-soft); max-width:34ch; }
.note-email { margin:30px 0 0; }
.note-email a { display:inline-flex; align-items:baseline; gap:.4em; padding:4px 0 10px; border-bottom:1px solid var(--line-strong); font-family:"Bodoni Moda",Georgia,serif; font-size:clamp(26px,3.2vw,40px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.note-email a span { font-family:"EB Garamond",Georgia,serif; font-size:.6em; }
.note-email a:hover,.note-email a:focus-visible { color:var(--rust); }
.note-body { margin-top:40px; }
.note-body section { padding:22px 0 10px; border-top:1px solid var(--line); }
.note-body h2 { margin:0 0 10px; font-family:"Bodoni Moda",Georgia,serif; font-weight:400; font-size:var(--t-name); line-height:1.25; }
.note-body p { margin:0 0 12px; font-size:var(--t-body); line-height:var(--t-body-lh); color:var(--ink-soft); max-width:var(--measure); text-wrap:pretty; }
.note-body a { color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.note-body a:hover,.note-body a:focus-visible { color:var(--rust); }
.note-body-contact { max-width:42ch; } .note-body-contact p { color:var(--ink-faint); }
.preview-bar { margin-top:28px; }   /* the build strips this line in production (scripts/build.mjs) */
.note-colophon { margin-top:40px; }
/* On a short page the service links sit at the foot of the first screen, as they do on the cover and the circle. */
html[data-state="chapter"] .reading { min-height:calc(100svh - 62px); }
html[data-state="chapter"][data-side="bottom"] .reading { min-height:calc(100svh - 62px - var(--hemH)); }
.ghost { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.ghost .reading { position:absolute; left:0; right:0; }
.ghost .selvedge { display:flex; gap:12px; }
@media (max-width:600px) { .note-email a { font-size:26px; } }

/* Step 09 (decided 5 Oct): the foot of a page. The service links close every chapter; below Exhibit One they
   sat under the rim, so the clearance for a bottom rim now belongs to them, not to the reading column. */
.reading[data-side="bottom"] .reading-body { padding-bottom:48px; }
html[data-state="chapter"][data-side="bottom"] .selvedge,html.is-moving[data-side="bottom"] .selvedge { padding-bottom:calc(var(--hemH) + 18px + env(safe-area-inset-bottom,0px)); }

/* Step 08 (decided 5 Oct): the images. The frame is one hairline on the cloth and the artwork sits on the second
   parchment tone; a picture still on its way waits unprinted and inks in when it lands; pressing the study
   cuts it away behind the fold (material.js) rather than fading it, so its own fade is switched off. */
.reading picture { display:contents; }
.reading .art-pair { cursor:pointer; background:var(--cloth-2); border-color:var(--line-strong); }
.reading .detail-image { border-color:var(--line-strong); }
.reading .scarf-overview { transition:none; }
.reading .art-pair.is-loading,.reading .detail-image.is-loading { opacity:.16; filter:grayscale(1) contrast(.55) brightness(1.08); }
.reading .art-pair:hover + .image-captions [data-art-hint],.reading .art-pair:focus-visible + .image-captions [data-art-hint] { color:var(--rust); }

/* Step 07 (decided 4 Oct): a calmer top margin on pages whose rim is not at the top; on Materials the
   closing line sits under the lead instead of floating at the table's foot. */
.reading-body { padding-top:64px; }
.reading[data-side="top"] .reading-body { padding-top:calc(var(--hemH) + 40px); }
.reading[data-chapter="materials"] .chapter-stack { grid-template-rows:auto auto 1fr; }
.reading[data-chapter="materials"] .quiet-copy { align-self:start; }
@media (max-width:600px) {
  .reading-body { padding-top:32px; }
  .reading[data-side="top"] .reading-body { padding-top:calc(var(--hemH) + 24px); }
  /* Phone (decided 5 Oct): on Materials the label sits above its text so the text runs the full column. */
  .reading .material-row,.reading .material-row-last { flex-direction:column; gap:6px; }
  .reading .material-label { flex-basis:auto; padding-top:0; }
}