/* ============================================================================
   SUPERBOLD Design Lab — stylesheets
   Author: Tom Zeien, tomzeien@me.com

   Plain modern CSS. No build step, no preprocessor: edit a file and reload.
   Uses native nesting, cascade layers, custom properties, light-dark(),
   oklch() and container queries.

   Load order (every page loads all eleven, in this order):

       01-reset            normalize
       02-tokens           primitives, semantics, component recipes
       03-base             element defaults, focus, measure
       04-typography       the closed set of type classes
       05-buttons          buttons and links
       06-nav              the floating nav pill
       07-shell            page furniture: layout, media, cards, footer
       08-case-study       the case study template
       09-pages            per-page components
       10-project-detail   the seven earlier project pages
       11-animation        the one entrance effect, plus utilities

   ============================================================================ */


/* Layer order. Everything on the site is in one of these, so the cascade is
   decided here rather than by specificity accidents or !important. Later layers
   win regardless of how specific the earlier selector was. */
@layer reset, tokens, base, components, pages, utilities;

/* Opt every page into cross-document view transitions. This is the whole
   opt-in: no JS, no per-link markup. Both the outgoing and incoming page need
   it present, and since it's here in the one stylesheet all 17 pages share,
   that's automatic. Unsupported browsers ignore the at-rule and navigate
   exactly as before — this is pure progressive enhancement.

   What actually animates is decided in 06-nav (the persistent header) and
   guarded for prefers-reduced-motion in 11-animation. */
@view-transition {
	navigation: auto;
}

@layer reset {

/* ============================================================================
   RESET
   ============================================================================ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote::before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

} /* @layer reset */