:root {
    --font-size-base: 1rem;
    --line-height-base: 1.6;

    --space-xs:  0.5rem; 
    --space-s:   0.75rem;
    --space-m:   1.25rem;
    --space-l:   2rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, fieldset {
    margin: 0;
}

ol, ul, fieldset, legend {
    padding: 0;
}

ol, ul {
    list-style: none;
}

fieldset {
    border: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    font-family: "Sen", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
                 "Noto Color Emoji";
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    overflow-wrap: break-word;
    text-rendering: optimizeSpeed;
}

:focus-visible {
    outline: 2px auto -webkit-focus-ring-color;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
    text-decoration: none;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

svg:not([fill]) {
    fill: currentColor;
}

header, main, footer, nav, section, aside, article {
    display: block;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 2.441rem; }
h2 { font-size: 1.953rem; }
h3 { font-size: 1.563rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: var(--font-size-base); }
h6 { font-size: 0.8rem; }
p, q, li, a { font-size: var(--font-size-base); }

:where(h1, h2, h3, h4, h5, h6, p, q, ul, ol, figure, blockquote) + :where(h1, h2, h3, h4, h5, h6, p, q, ul, ol, figure, blockquote) {
    margin-top: var(--space-m);
}

figure {
    text-align: center;
}

figcaption {
    font-size: 0.875rem;
    padding-top: var(--space-xs);
    line-height: 1.4;
}

blockquote, q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote {
    padding-left: var(--space-m);
    border-left: 4px solid #eee;
    font-style: italic;
}

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 768px) {
    :root {
        --font-size-base: 0.9375rem;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
}