/* Shared foundation for the five concepts.
   Tokens come from the design system; each concept adds its own voice on top.
   Deliberately thin - the concepts differ in layout and restraint, not in reset. */
@import url("../design-system/styles.css");

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--surface-page)}
body{overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,figcaption,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- finish ----------
   Small site-wide details that read as care rather than as features. */
/* light-only site: stops dark-mode browsers auto-darkening form controls */
html{color-scheme:light}
/* brand-tinted text selection instead of the browser default */
::selection{background:var(--sky-100,#C0D8F0);color:var(--ink-900,#0B0B0C)}
/* keyboard focus in the system's own focus colour. :where() keeps specificity
   at zero so components with their own focus treatment still win. */
:where(a,button,summary):focus-visible{
  outline:2px solid var(--focus-ring,#60A8F0);
  outline-offset:3px;border-radius:var(--radius-sm,8px);
}
/* in-page jumps glide, and anchor targets clear the sticky header instead of
   landing flush underneath it */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:where([id]){scroll-margin-top:var(--space-24,96px)}
/* interactive elements carry their own pressed states - the grey mobile tap
   flash on top of them reads as jank */
a,button,summary,label{-webkit-tap-highlight-color:transparent}

/* Three type roles, and only three. Restraint is the whole point. */
.t-display{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  letter-spacing:var(--tracking-display);line-height:var(--leading-heading);
}
.t-body{font-size:var(--text-lg);line-height:var(--leading-body);color:var(--ink-700)}
.t-micro{
  font-weight:var(--weight-heavy);font-size:var(--text-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-muted);
}

/* One reveal, shared: a clip wipe from the bottom with a staggered start.
   No scale, no bounce - the image arrives, it doesn't perform.

   The hidden start state lives behind .reveal-ready, which reveal.js sets
   synchronously. If the script never runs, the page is simply visible -
   content must never depend on an observer firing. */
.reveal-ready [data-in]{
  opacity:0;
  clip-path:inset(14% 0 0 0);
  transition:opacity .8s var(--ease-out),clip-path .9s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal-ready [data-in].in{opacity:1;clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .reveal-ready [data-in]{opacity:1;clip-path:none;transition:none}
}

.skip{
  position:fixed;top:12px;left:12px;z-index:99;
  padding:10px 18px;border-radius:var(--radius-pill);
  background:var(--ink-900);color:var(--white);font-weight:var(--weight-bold);
  transform:translateY(-200%);
}
.skip:focus-visible{transform:none}

/* concept switcher - present on every concept so they can be compared quickly */
.switch{
  position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);
  z-index:90;display:flex;align-items:center;gap:var(--space-1);
  padding:var(--space-2);border-radius:var(--radius-pill);
  background:var(--white);box-shadow:var(--shadow-raised);
}
.switch a{
  display:grid;place-items:center;min-width:34px;height:34px;
  padding-inline:var(--space-3);border-radius:var(--radius-pill);
  font-weight:var(--weight-heavy);font-size:var(--text-xs);
  letter-spacing:var(--tracking-caps);color:var(--ink-500);
  transition:background-color var(--speed-fast) var(--ease-out),color var(--speed-fast) var(--ease-out);
}
.switch a:hover{background:var(--ink-075);color:var(--ink-900)}
.switch a[aria-current]{background:var(--ink-900);color:var(--white)}
.switch .switch__home{color:var(--sky-700)}