/* The shared parts of the site. Colours and fonts only through the tokens. */

/* The floor: if the engine never starts, everything shows. It switches itself off
   when the engine arrives late, so nothing stays stacked. */
html.sc-floor:not(.sc-ready) :is([data-sc-cue], [data-sc-in], [data-sc-stagger] > *) { opacity: 1 !important; transform: none !important; transition: none !important; }
html.sc-floor:not(.sc-ready) [data-sc-reveal] { clip-path: none !important; }
html.sc-floor:not(.sc-ready) [data-sc-stage] { position: static !important; height: auto !important; }

h1, h2, h3, .sc-display { font-weight: var(--site-weight-heading); }
a, button { touch-action: manipulation; }

.skip { position: absolute; left: var(--sc-gutter); top: -5rem; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: var(--sc-2) var(--sc-4); background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--site-r-button); }
.skip:focus-visible { top: var(--sc-2); }

/* the action: one look, one label */
.cta {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-height: 48px; padding: var(--sc-3) var(--sc-6);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--site-r-button);
  font-weight: var(--site-weight-heading); text-decoration: none; white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out);
}
.cta:active { transform: scale(0.97); }
.cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.cta--small { min-height: 44px; padding: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
@media (hover: hover) and (pointer: fine) { .cta:hover { opacity: 0.88; } }

/* shared header and footer */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-3) var(--sc-gutter);
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--site-line);
}
.site-bar__mark { display: inline-flex; min-height: 44px; align-items: center; }
.site-bar__mark img { height: 32px; width: auto; }
.site-bar__nav { display: flex; gap: var(--sc-5); margin-inline: auto var(--sc-4); }
.site-bar__nav:not(:has(a)) { display: none; }
.site-bar__nav a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
/* a phone-sized menu is a page decision: on a site with a menu, build it in step 11 */
@media (max-width: 700px) { .site-bar__nav { display: none; } }
main { padding-top: 4.5rem; }

.site-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-6) var(--sc-gutter);
  border-top: 1px solid var(--site-line);
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
}
.site-foot nav { display: flex; gap: var(--sc-4); }
.site-foot a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; }

/* a kit's label style, when the page uses labels */
.label {
  font-size: var(--site-label-size, var(--sc-t-xs));
  font-weight: var(--site-label-weight, 500);
  letter-spacing: var(--site-label-tracking, 0.08em);
  text-transform: var(--site-label-case, none);
  color: var(--sc-ink-soft);
}

/* starting pages: replace with the brief's own layout */
.hero { display: flex; align-items: center; padding: var(--sc-gutter); }
.argument { display: grid; align-content: center; justify-items: start; gap: var(--sc-4); padding: var(--sc-gutter); }
.argument > * { max-width: 24ch; }
/* Lines stack on one spot only once the engine runs. Without it they read in order. */
.sc-ready .argument > * { grid-area: 1 / 1; }
.plain { padding-block: var(--sc-9); max-width: var(--sc-measure); }
.plain h2 { margin-top: var(--sc-7); }
@media (max-width: 700px) {
  .sc-display--xl { font-size: var(--sc-t-2xl); }
}