/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved.
   Miracue notes. Loaded AFTER css/miracue.css, which carries the tokens, the
   grain, the nav, the sheets and the footer. This file holds only what a
   written note needs and nothing that could appear on another kind of page:
   see docs/miracue-design-system.md.

   These are reading pages, so the measure is narrower and the body is a step
   larger than the rest of the site. */

/* The prose column. The nav and the footer stay at full page width. */
.wrap{max-width:720px;padding:0 26px}
.nav .wrap,.site-foot .wrap{max-width:1020px;padding:0 24px}

body{font-size:17px;line-height:1.65}

/* ---- notes index ---- */
.idx-head{padding:56px 0 12px}
.idx-head h1{max-width:20ch}
.idx-list{padding:14px 0 8px}
/* an index item is a clickable sheet with a wider face than a note card */
.idx-item{margin-bottom:16px;padding:26px 28px 24px 30px}
.idx-item h2{font-size:22px;margin:0 0 8px}
.idx-item p{font-size:15.5px;line-height:1.6}

/* ---------------------------------------------------------------- header -- */
.note-head{padding:60px 0 34px}
.note-head .back{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); text-decoration:none;
}
.note-head .back:hover{color:var(--ink)}
.note-head h1{margin:20px 0 18px; max-width:16ch}
.note-head .standfirst{font-size:19px; max-width:54ch}

/* ----------------------------------------------------------------- prose -- */
main{padding:8px 0 0}

/* Figures break out past the prose column. Line art only: it inherits the ink
   colour, so one drawing serves the page and stays a zero-request page. */
@media (min-width:900px){
  /* Break out of the 720px prose column and re-centre on the page. */
  .fig,.album{width:min(980px, calc(100vw - 52px)); margin-left:50%; transform:translateX(-50%)}
}

@media (max-width:640px){
  body{font-size:16.5px}
  .note-head{padding:42px 0 26px}
}

/* The copy-ready prompt block (import-scripts note). */
.prompt-card{border:1px solid var(--edge);border-radius:14px;background:var(--sheet);overflow:hidden;margin:26px 0}
.prompt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;
  border-bottom:1px solid var(--edge);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.prompt-bar button{font:inherit;color:var(--ink);background:var(--sheet-2);border:1px solid var(--edge);
  border-radius:9999px;padding:6px 14px;cursor:pointer;letter-spacing:.08em}
.prompt-bar button:hover{background:var(--page)}
.prompt-card pre{margin:0;padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);white-space:pre}

/* ------------------------------------------------------- numbered steps -- */
.note-steps{margin:0 0 1.5em;padding-left:1.25em}
.note-steps li{margin:0 0 1em}
.note-steps li::marker{font-weight:650}

/* Index cards with a thumbnail: press-clipping layout, image beside the text. */
.idx-item.has-thumb{display:grid;grid-template-columns:212px 1fr;gap:26px;align-items:center}
.idx-item .thumb{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:4px;
  box-shadow:0 1px 2px rgba(34,31,27,.10),0 8px 20px rgba(34,31,27,.10)}
.idx-item .thumb img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:620px){
  .idx-item.has-thumb{grid-template-columns:1fr;gap:16px}
  .idx-item .thumb{aspect-ratio:2/1}
}