@charset "UTF-8";
/* =========================================================
   editorial.css: extras for the InDesign Refresher and
   Editorial Design lessons. Loaded after site.css.
   ========================================================= */

/* Menu paths, e.g. File > Place */
.menu { font-weight: 700; background: var(--spot-soft); border-radius: 4px; padding: 0 0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Diagrams drawn as inline SVG on a light plate */
.content figure .plate svg { display: block; width: 100%; height: auto; }

/* Rows of small diagrams */
.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0; max-width: var(--measure); }
.figure-row figure { margin: 0; display: flex; flex-direction: column; }
.figure-row .plate { padding: 8px; }
.figure-row figcaption { display: block; }
.figure-row figcaption strong { display: block; color: var(--ink); }
.figure-row.spreads { grid-template-columns: 1fr; }
@media (min-width: 700px) { .figure-row.spreads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Two-up comparison (constants and variables) */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 24px; max-width: var(--measure); }
.compare > div { background: var(--sheet); border: 1px solid var(--rule); border-top: 5px solid var(--spot); border-radius: var(--radius); padding: 14px 18px; }
.compare h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 8px; }
.compare ul { margin: 0; padding-left: 1.2rem; }

@media print {
  .content figure, .callout, .table-wrap, .compare { break-inside: avoid; }
}

/* ---------- Type system specimen (Type system & pacing) ---------- */
/* Fixed light colors: these sit on a light plate in both themes */
.ts, .ts-scale { --r-display: #c2421a; --r-sans: #1c64c8; --r-text: #0a716c; color: #17212b; }
.ts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; padding: 20px; }
@media (max-width: 640px) { .ts { grid-template-columns: 1fr; } }
.r-display { --r: var(--r-display); }
.r-sans { --r: var(--r-sans); }
.r-text { --r: var(--r-text); }
.ts-sample > p { border-left: 4px solid var(--r); padding-left: 12px; margin: 0 0 10px !important; max-width: none; }
.ts-kicker { font: 700 0.72rem 'Montserrat', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-display); }
.ts-head { font: 900 clamp(1.8rem, 1.3rem + 2vw, 2.6rem)/1.05 'Playfair Display', serif; }
.ts-deck { font: italic 1.15rem/1.4 'Lora', serif; color: #3a4650; }
.ts-byline { font: 600 0.72rem 'Montserrat', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.ts-body { font: 0.95rem/1.55 'Lora', serif; }
.ts-sub { font: 700 0.85rem 'Montserrat', sans-serif; }
.ts-cap { font: 0.72rem 'Montserrat', sans-serif; color: #55616b; }
.ts-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ts-roles li { margin: 0; padding: 10px 12px; border: 1px solid #dcdcd4; border-left: 6px solid var(--r); border-radius: 0 8px 8px 0; background: #fff; }
.ts-roles strong { display: block; color: var(--r); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ts-roles span { display: block; font-weight: 700; }
.r-display span { font-family: 'Playfair Display', serif; font-size: 1.2rem; }
.r-sans span { font-family: 'Montserrat', sans-serif; }
.r-text span { font-family: 'Lora', serif; font-size: 1.05rem; }
.ts-roles small { display: block; color: #55616b; font-size: 0.85rem; line-height: 1.35; }

/* Size scale */
.ts-scale { list-style: none; margin: 0; padding: 8px 4px 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; max-width: none; }
.ts-scale li { margin: 0; display: grid; justify-items: start; }
.ts-scale .aa { line-height: 1; color: var(--r); }
.ts-scale .r-display { font-family: 'Playfair Display', serif; font-weight: 900; }
.ts-scale .r-text { font-family: 'Lora', serif; }
.ts-scale .r-sans { font-family: 'Montserrat', sans-serif; }
.ts-scale b { font-family: var(--font-code); font-size: 0.8rem; margin-top: 6px; }
.ts-scale small { color: #55616b; font-size: 0.8rem; }

/* Storyboard thumbnails with a loudness meter */
.figure-row.storyboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .figure-row.storyboard { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.storyboard figure > svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.storyboard figcaption { font-size: 0.82rem; }
.vol { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 4px; vertical-align: -1px; }
.vol i { width: 5px; background: var(--rule); border-radius: 1px; }
.vol i:nth-child(1) { height: 6px; } .vol i:nth-child(2) { height: 10px; } .vol i:nth-child(3) { height: 14px; }
.vol-1 i:nth-child(1), .vol-2 i:nth-child(-n+2), .vol-3 i { background: var(--spot); }

/* ---------- Sample Production Notes sheet (InDesign Refresher) ---------- */
.pn-sheet { color: #17212b; padding: 22px 24px; font-size: 0.9rem; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.content .pn-sheet p { max-width: none; }
.pn-title { font: 700 1.2rem var(--font-display); margin: 0 0 12px !important; padding-bottom: 8px; border-bottom: 3px solid var(--spot); }
.pn-title span { display: block; font: 400 0.8rem var(--font-body); color: #55616b; }
.pn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; margin: 0 0 14px; }
.pn-grid dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--spot); }
.pn-grid dd { margin: 0; }
.pn-table { font-size: 0.85rem; margin-bottom: 10px; }
.pn-table th { background: #f4f4f1; color: #17212b; }
.pn-foot { font-size: 0.8rem; color: #55616b; margin: 0 !important; }