/* core.css: the skeleton's plumbing styles, the same in every run. No look: no colors, fonts or sizes of the design.
   Loaded on every page after system.css and before components.css. */

/* A screen laid over its photo (core.js places it). Its box is the size its interface is designed at. */
[data-screen-photo] { position: relative; display: block; overflow: hidden; }
[data-screen-photo] > img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-screen] { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; backface-visibility: hidden; }
[data-screen]:not([data-placed]) { visibility: hidden; }

/* A scene fills the box its page gives it, its padding included, and keeps everything it draws inside that box. */
[data-scene] { position: relative; overflow: hidden; box-sizing: border-box; }

/* A link to a page that is only planned (Part 1): it shows, but it is not clickable yet. */
[data-planned] { pointer-events: none; cursor: default; }

/* A stop icon shows the icon of what pressing it does. */
[data-stop] .stop__play { display: none; }
[data-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-stop][aria-pressed="true"] .stop__pause { display: none; }

/* The skip link appears when it gets the focus. */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 1000; }

/* Hidden from the eye, read by screen readers. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* What the kit hides stays hidden. */
[hidden] { display: none !important; }

/* The skeleton's own pages, the 404 and the legal pages: one reading column in the design's spacing and the text's own
   color, so they never show unstyled. components.css gives them the site's look. */
.not-found, .legal { box-sizing: border-box; max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding: var(--section-y) var(--gutter); }
.not-found { display: grid; justify-items: start; gap: var(--space-3); }
.not-found__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-2); }
.legal > * + * { margin-top: var(--space-2); }
.legal > h2 { margin-top: var(--space-5); }
.legal > h3 { margin-top: var(--space-4); }
.legal > ul { padding-left: 1.4em; }
.legal li + li { margin-top: 0.4em; }
.legal__note { padding: var(--space-3) var(--space-4); background: color-mix(in srgb, currentColor 7%, transparent); }
.legal a { overflow-wrap: anywhere; }