/* Native offline references. Every rule is scoped to the offline chapter. */
#offline .fg-chapter-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
#offline .fg-instructions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 52px; align-items: start; }
#offline .fg-instructions > .fg-steps { grid-column: 1; grid-row: 1 / span 2; }
#offline .fg-instructions > .fg-finish { grid-column: 2; grid-row: 1; margin-top: 0; }
#offline .fg-instructions > .fg-notes { grid-column: 2; grid-row: 2; }
#offline .beauty-offline { width: 100%; border-top: 1px solid var(--line, #c8c2b7); padding-top: 32px; }
#offline .beauty-offline-intro { max-width: 62ch; margin: 0 auto 30px; text-align: center; }
#offline .beauty-offline-intro .beauty-offline-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase; color: var(--muted, #625b50); margin: 0 0 10px; }
#offline .beauty-offline-intro h3 { font-size: clamp(25px, 2.7vw, 32px); line-height: 1.25; margin: 0 0 14px; }
#offline .beauty-offline-intro > p:last-child { font-size: 18px; line-height: 1.65; margin: 0; }
#offline .beauty-offline-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; max-width: 850px; margin: 0 auto; }
#offline .beauty-offline-figure { min-width: 0; margin: 0; }
#offline .beauty-offline-label { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
#offline .beauty-offline-label > span { color: var(--orange-deep, #b35e28); font-size: 16px; font-weight: 700; font-family: var(--mono, monospace); }
#offline .beauty-offline-label h4 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
#offline .beauty-offline-screen { display: block; max-width: 370px; margin: 0 auto; padding: 11px; background: #1c2023; border: 2px solid #5a5e60; border-radius: 26px; box-shadow: 0 2px 0 #080a0c, 0 10px 30px rgb(28 32 35 / 16%), inset 0 1px 0 rgb(255 255 255 / 20%); text-decoration: none; }
#offline .beauty-offline-screen:focus-visible { outline: 3px solid var(--orange-deep, #b35e28); outline-offset: 6px; }
#offline .beauty-offline-screen img { display: block; width: 100%; height: auto; border-radius: 14px; }
#offline .beauty-offline-figure figcaption { font-size: 18px; line-height: 1.6; color: var(--muted, #625b50); margin: 22px auto 0; max-width: 38ch; }
#offline .beauty-offline-provenance { max-width: 850px; margin: 30px auto 0; padding-top: 24px; border-top: 1px solid var(--line, #c8c2b7); }
#offline .beauty-offline-provenance p { font-size: 16px; line-height: 1.6; color: var(--muted, #625b50); margin: 0; }
#offline .beauty-offline-current { max-width: 850px; margin: 28px auto 0; padding: 22px 24px; background: rgb(255 253 248 / 70%); border-left: 4px solid var(--orange-deep, #b35e28); border-radius: 0 8px 8px 0; }
#offline .beauty-offline-current h4 { margin: 0 0 8px; font-size: 20px; line-height: 1.4; }
#offline .beauty-offline-current p { margin: 0; font-size: 18px; line-height: 1.65; }
@media (max-width: 820px) {
  #offline .fg-instructions { display: block; }
  #offline .fg-instructions > .fg-finish { margin-top: 18px; }
  #offline .beauty-offline-gallery { gap: 28px; }
}
@media (max-width: 620px) {
  #offline .beauty-offline-intro { text-align: left; }
  #offline .beauty-offline-gallery { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #offline .beauty-offline-label { margin-bottom: 16px; }
  #offline .beauty-offline-screen { padding: 9px; border-radius: 23px; }
  #offline .beauty-offline-screen img { border-radius: 12px; }
  #offline .beauty-offline-provenance { margin-top: 28px; }
  #offline .beauty-offline-current { padding: 20px; }
}