@font-face {
font-family: 'Aeonik';
src: url('../assets/fonts/Aeonik-Regular-vn.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
scroll-behavior: auto;
}
body {
background: var(--ground);
--page-bg: var(--ground);
transition: background-color 0.7s var(--ease);
color: var(--ink);
font-family: var(--font);
font-weight: 400;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, li, span, a, blockquote { font-weight: 400; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--ground); }
.container {
width: 100%;
max-width: 94vw;
margin-inline: auto;
}
.section {
position: relative;
z-index: 2;
}
main > * + * { margin-top: var(--sec-gap); }
main > .section:first-child { margin-top: var(--sec-gap); }
.bleed { max-width: 100%; }
.t-xxxl { font-size: var(--t-xxxl); line-height: var(--lh-display); letter-spacing: -0.035em; }
.t-xxl  { font-size: var(--t-xxl);  line-height: var(--lh-display); letter-spacing: -0.02em; }
.t-xxl3 { font-size: var(--t-xxl3); line-height: var(--lh-display); letter-spacing: -0.015em; }
.t-xl   { font-size: var(--t-xl);   line-height: var(--lh-heading); }
.t-l    { font-size: var(--t-l);    line-height: var(--lh-subhead); }
.t-m    { font-size: var(--t-m);    line-height: var(--lh-lead); }
.t-s    { font-size: var(--t-s);    line-height: var(--lh-body); }
.t-xs   { font-size: var(--t-xs);   line-height: var(--lh-body); }
.t-xxs  { font-size: var(--t-xxs);  line-height: var(--lh-body); }
.muted { color: var(--muted); }
.dimmed { color: var(--dim); }
.body-ink { color: var(--body); }
.pretty { text-wrap: pretty; }
.label {
font-size: var(--t-xxs);
line-height: var(--lh-body);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.label::before { content: '( '; }
.label::after { content: ' )'; }
.label--bare::before,
.label--bare::after { content: none; }
.label:has(.ln)::before,
.label:has(.ln)::after { content: none; }
.label:not(.label--bare) .ln > i::before { content: '( '; }
.label:not(.label--bare) .ln > i::after { content: ' )'; }
[data-split="one"] > .ln { display: inline-block; vertical-align: bottom; }
.vh {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hp { display: none !important; }
.skip {
position: absolute; top: -100px; left: 1rem; z-index: 100000;
padding: 0.75rem 1.25rem; background: var(--ink); color: var(--on-light);
border-radius: var(--radius-pill);
}
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }