/* Mobile, tap-target, legibility and shared-chrome fixes from the 11 September 2026 audit. Loaded last on every page. */
.skip{position:fixed;top:-100px;left:16px;background:#fffdf6;color:#211f1a;padding:12px;z-index:100}.skip:focus{top:10px}
/* Shared course footer row */
.site-links{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding:18px 24px 6px;font:12px/1.5 'IBM Plex Mono',monospace;letter-spacing:.04em;text-transform:uppercase;background:#f3f0e8;color:#211f1a;border-top:1px solid #ccc;margin-top:30px}
.site-links a{color:#211f1a;text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0}
.site-links+.legal-links{margin-top:0;border-top:0}
/* Order dialogs: one primary action, a quiet secondary */
.small-dialog .dialog-secondary,#campaign-order .dialog-secondary{display:block;width:auto;margin:16px auto 4px;font-size:13px}
/* Consent bar: a slim strip on phones, never stacked over the preview bar */
@media(max-width:767px){
 .preview-bar{display:none}
 .measurement-choice{left:0;right:0;bottom:0;max-width:none;padding:12px 16px 14px;box-shadow:none;border-width:1px 0 0}
 .measurement-choice p{font-size:12px;line-height:1.5;margin:0 0 10px}
 .measurement-choice>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .measurement-choice button{min-height:44px;font-size:13px}
 .measurement-settings{bottom:10px;left:10px;font-size:11px;padding:8px 10px}
 .variant-note{bottom:10px}
}
/* Legibility floor: nothing readable under 11px on phones */
@media(max-width:767px){
 .micro,.eyebrow,.edition-bar,.image-label,.hero-facts span,.hero-price,.hero-copy>.eyebrow,.offer-card-top .micro,.closing .micro,.lesson-header>.micro,.annotation-info .micro,.annotation-image>.image-label,.small-dialog>.eyebrow,.footer .micro,.lab-top .micro,.lab-example>div>.micro,.lab-preview aside>.micro,.sidebar-foot,.contact-mark,.small-print figcaption,.main-print figcaption,.print figcaption,.brand-lab span,.section-top .eyebrow,.section-top>.micro,.showcase-toolbar,.showcase-label,.showcase-number,.disclosure,.showcase-disclosure,.tiny-caption,.studio-kicker,.hero-contact-sheet figcaption,.work-caption>span,.campaign-main-image figcaption,.scene-picker button,.scene-observation,.web-kicker,.web-strip,.web-small,.lab-notice,.tags span,.frame-number,.variant-note,.lab-eyebrow,.method-grid .micro,.campaign-hero .eyebrow,.campaign-scope .tiny-caption,.course-ticket>span,.course-ticket>div,.frame-sheet small,.morrow-caption,.morrow-nav>span,.lesson-save-note,.progress-track+.micro{font-size:11px}
 .hero-facts span{max-width:none;line-height:1.35}
 .edition-bar{letter-spacing:.06em}
 .hero-contact-sheet figcaption{line-height:1.45}
}
/* Tap targets: 44px for anything a thumb has to hit */
@media(max-width:1024px){
 .studio-header nav a,.header nav a,.lab-header nav a,.web-header nav a,.web-footer div a,.studio-footer a,.footer a,.legal-links a,.site-links a,.walkthrough-tabs a,.lab-footer a,.legal-header a{display:inline-flex;align-items:center;min-height:44px}
 .studio-header nav{gap:6px 18px;flex-wrap:wrap}
 .text-button,.web-text-link,.lesson-jump,.course-workspace-link{position:relative}
 .text-button::before,.web-text-link::before,.lesson-jump::before,.course-workspace-link::before{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
 .showcase-toolbar button,.frame-controls button,.marquee-toggle,.icon-button,.web-close,.vault-close,.scene-picker button,.concept-picker button,.look-tabs button,.lesson-step-buttons button,.price-options button,.notebook-actions button,.photo-switch button,.scent-selector button,#lesson-nav button{min-height:44px}
 .marquee-toggle,.icon-button,.web-close,.vault-close,.showcase-toolbar button,.frame-controls button{min-width:44px}
 input[type=checkbox],input[type=radio]{width:22px;height:22px;flex-shrink:0;margin:2px 10px 2px 0;accent-color:#522bd5}
 .check,.quiz-choice,.fix-option,.launch-checks label{min-height:44px;align-items:center}
 .legal-links{gap:0 24px;padding-block:12px}
}
/* Digital hero: keep both worksheet sheets inside the frame on narrow phones */
@media(max-width:760px){
 .frame-art{margin:20px 0 30px;min-height:560px}
 .frame-sheet{width:72%;min-height:380px;padding:20px}
 .frame-sheet strong{font-size:56px;margin:26px 0 12px;white-space:nowrap}
 .frame-sheet h3{font-size:24px}.frame-sheet p{font-size:13px}
 .frame-sheet.front{left:4%;top:60px;transform:rotate(-4deg)}
 .frame-sheet.back{right:4%;transform:rotate(3deg)}
 .frame-art:hover .front{transform:rotate(-4deg)}
}
@media(max-width:400px){.frame-art{min-height:620px}.frame-sheet{width:70%;padding:18px}.frame-sheet strong{font-size:48px}.frame-sheet h3{font-size:22px}}