/* MichelangeloLab site base: the mechanics every page shares (Framer-like primitives).
Load order: fonts/fonts.css, motion/scrollcraft.css, base/base.css, style.css.
Brand look lives in style.css: override the tokens below, never these rules' structure.
Tokens bridge to the ScrollCraft roles (--sc-*) so one palette themes both. */
/* ------------------------------------------------------------- tokens -- */
:root {
--canvas: var(--sc-canvas, #f4f1ea);
--surface: var(--sc-surface, #ebe6db);
--ink: var(--sc-ink, #1c1a17);
--ink-soft: var(--sc-ink-soft, #5d574e);
--accent: var(--sc-accent, #1f4a3a);
--accent-ink: var(--sc-accent-ink, #f4f1ea);
--line: color-mix(in srgb, var(--ink) 14%, transparent);
--font-head: var(--font-display, Georgia, serif);
--font-text: var(--font-body, system-ui, sans-serif);
/* fluid type ramp: 390px -> 1440px */
--t-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
--t-sm: clamp(0.9rem, 0.87rem + 0.12vw, 0.98rem);
--t-base: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
--t-lg: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
--t-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.2rem);
--t-2xl: clamp(2rem, 1.6rem + 1.7vw, 3.4rem);
--t-3xl: clamp(2.5rem, 1.8rem + 3vw, 5rem);
--t-4xl: clamp(2.9rem, 1.9rem + 4.6vw, 7rem);
/* 4px spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
--s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;
--section: clamp(64px, 6vw + 40px, 160px);
--gutter: clamp(20px, 4vw, 56px);
--max: 1320px;
--measure: 62ch;
--radius: 14px;
--radius-sm: 8px;
--radius-pill: 999px;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--shadow-1: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ink) 10%, transparent);
--shadow-2: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 18px 40px -16px color-mix(in srgb, var(--ink) 22%, transparent);
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--header-h: 72px;
}
/* -------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
margin: 0; min-height: 100svh; background: var(--canvas); color: var(--ink);
font-family: var(--font-text); font-size: var(--t-base); line-height: 1.6;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:where(h1, h2, h3, h4) { font-family: var(--font-head); font-weight: 550; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
:where(p, li, figcaption, blockquote) { text-wrap: pretty; overflow-wrap: break-word; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: var(--s-4); top: var(--s-4); z-index: 100; padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--canvas); border-radius: var(--radius-sm); transform: translateY(-160%); transition: transform 0.2s var(--ease-out); }
.skip-link:focus-visible { transform: none; }
/* ----------------------------------------------------------- typography -- */
.t-display { font-family: var(--font-head); font-size: var(--t-4xl); line-height: 0.98; letter-spacing: -0.035em; }
.t-h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.03em; }
.t-h2 { font-size: var(--t-2xl); line-height: 1.06; letter-spacing: -0.025em; }
.t-h3 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -0.015em; }
.t-lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); max-width: 42ch; }
.t-body { font-size: var(--t-base); max-width: var(--measure); }
.t-small { font-size: var(--t-sm); color: var(--ink-soft); }
.t-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-soft { color: var(--ink-soft); }
.t-accent { color: var(--accent); }
.prose > * + * { margin-top: 1em; }
.prose { max-width: var(--measure); }
@media (max-width: 700px) {
.t-display { font-size: var(--t-3xl); }
.t-h1 { font-size: var(--t-2xl); }
}
/* --------------------------------------------------------------- layout -- */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.container--narrow { --max: 920px; }
.container--wide { --max: 1560px; }
.bleed { width: 100%; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.55); }
.section--flush-top { padding-top: 0; }
.section--surface { background: var(--surface); }
.section--invert { background: var(--ink); color: var(--canvas); --ink-soft: color-mix(in srgb, var(--canvas) 72%, var(--ink)); --line: color-mix(in srgb, var(--canvas) 18%, transparent); }
.section--accent { background: var(--accent); color: var(--accent-ink); --ink-soft: color-mix(in srgb, var(--accent-ink) 75%, var(--accent)); --line: color-mix(in srgb, var(--accent-ink) 22%, transparent); }
/* 12-column grid. Children set --span (desktop) and --span-md (tablet); phones stack. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap, var(--s-6)); row-gap: var(--row-gap, var(--s-7)); align-items: var(--align, start); }
.grid > * { grid-column: span var(--span, 12); min-width: 0; }
.grid > [data-start] { grid-column: var(--start) / span var(--span, 12); }
@media (max-width: 1024px) { .grid > * { grid-column: span var(--span-md, 12); } .grid > [data-start] { grid-column: span var(--span-md, 12); } }
@media (max-width: 700px) { .grid { row-gap: var(--s-6); } .grid > *, .grid > [data-start] { grid-column: 1 / -1; } .grid > [data-order-sm] { order: var(--order-sm); } }
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-5)); }
.stack--tight { --gap: var(--s-3); }
.stack--loose { --gap: var(--s-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-4)); }
.split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-6); }
.rule { height: 1px; border: 0; background: var(--line); margin: 0; }
/* ---------------------------------------------------------------- media -- */
/* ![]()
: any image, cropped, never distorted. */
.frame { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--frame-radius, var(--radius)); background: var(--surface); isolation: isolate; }
.frame > img, .frame > picture > img, .frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
.frame--zoom > img { transition: transform 0.9s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .frame--zoom:hover > img { transform: scale(1.04); } }
.caption { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 700px) { .frame { aspect-ratio: var(--ratio-sm, var(--ratio, 4 / 3)); } }
/* -------------------------------------------------------------- buttons -- */
.btn {
--btn-bg: var(--accent); --btn-ink: var(--accent-ink);
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: 48px; padding: 0 var(--s-5); border-radius: var(--btn-radius, 6px);
background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-bg);
font-family: var(--font-text); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; text-decoration: none;
transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out), border-color 0.16s var(--ease-out), transform 0.12s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn--ghost { --btn-bg: transparent; --btn-ink: currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.btn--light { --btn-bg: var(--canvas); --btn-ink: var(--ink); }
.btn--lg { min-height: 56px; padding: 0 var(--s-6); font-size: var(--t-base); }
.btn svg { width: 1em; height: 1em; transition: transform 0.18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.btn:hover { box-shadow: var(--shadow-1); filter: brightness(1.06); }
.btn--ghost:hover { border-color: currentColor; filter: none; }
.btn:hover svg { transform: translateX(3px); }
}
.btn:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 0.16s var(--ease-out); }
.link:hover { text-decoration-color: currentColor; }
/* --------------------------------------------------------------- header -- */
/*