/*
    https://piccalil.li/blog/a-more-modern-css-reset/
*/

*,*::before,*::after {box-sizing: border-box;}
html {-moz-text-size-adjust: none;-webkit-text-size-adjust: none;text-size-adjust: none;}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {margin: 0;}
ul[role='list'], ol[role='list'] {list-style: none;}
ul, ol {padding: 0;}
body {min-height: 100vh;}
h1, h2:not(.article-heading), button, input, label {line-height: 1.1;}
h1, h2, h3 {text-wrap: balance;}
a:not([class]) {text-decoration-skip-ink: auto;}
img, picture {max-width: 100%;display: block;}
input, button,textarea, select {font: inherit;}
textarea:not([rows]) {min-height: 10em;}
:target {scroll-margin-block: 5ex;}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(WorkSans.woff2) format('woff2');
}

:root {
    --step--2: clamp(0.6944rem, 0.6593rem + 0.1759vi, 0.8rem);
    --step--1: clamp(0.8333rem, 0.7778rem + 0.2778vi, 1rem);
    --step-0: clamp(1rem, 0.9167rem + 0.4167vi, 1.25rem);
    --step-1: clamp(1.2rem, 1.0792rem + 0.6042vi, 1.5625rem);
    --step-2: clamp(1.44rem, 1.269rem + 0.8552vi, 1.9531rem);
    --step-3: clamp(1.728rem, 1.4902rem + 1.189vi, 2.4414rem);
    --step-6: clamp(2.986rem, 2.3919rem + 2.9706vi, 4.7684rem);

    --space-3xs: clamp(0.25rem, 0.2292rem + 0.1042vi, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4583rem + 0.2083vi, 0.625rem);
    --space-xs: clamp(0.75rem, 0.6875rem + 0.3125vi, 0.9375rem);
    --space-s: clamp(1rem, 0.9167rem + 0.4167vi, 1.25rem);
    --space-l: clamp(2rem, 1.8333rem + 0.8333vi, 2.5rem);
    --space-xl: clamp(3rem, 2.75rem + 1.25vi, 3.75rem);
    --space-2xl: clamp(4rem, 3.6667rem + 1.6667vi, 5rem);
    --space-3xl: clamp(4.5rem, 4.125rem + 1.875vi, 5.625rem);
    --space-4xl: clamp(9rem, 8.25rem + 3.75vi, 11.25rem);

    --shadow-color: 0deg 0% 0%;
    --shadow:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
        0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.11),
        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.11),
        5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.11);

    --measure: calc(var(--step-0) * 43.5);

    --leading-standard: 1.5;

    --system-ui: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;

    --grey-color: 242, 242, 243;
    --dark-color: 0, 8, 46;
    --accent-color: 208, 167, 73;
    --light-color: 237, 220, 205;
    --tint: rgba(255, 255, 255, 0.05);
}

html,
body,
div,
header,
nav,
main,
footer {
    max-inline-size: none;
}

body {
    font-family: var(--system-ui);
    font-size: var(--step-0);
    line-height: var(--leading-standard);
    color: rgba(var(--grey-color), 1);
    background: rgba(var(--dark-color), 1);
    background-image: url("./stars.svg");
    background-repeat: repeat;
}

a {
    color: rgba(var(--accent-color), 1);
}
a:hover {
    text-decoration-style: dotted;
}

img + figcaption {
    text-align: center;
}

blockquote + figcaption {
    color: rgba(var(--accent-color), 1);
}

h1 {
    font-size: var(--step-3);
    font-weight: 600;
}

h2:not(.article-heading) {
    font-size: var(--step-2);
    font-weight: 600;
    margin-block-end: var(--space-xs);
}
h2[id]:not(.article-heading) {
    border-inline-start: var(--space-3xs) solid rgba(var(--accent-color), 1);
    margin-inline-start: calc(var(--space-s) * -1);
    padding-inline-start: var(--space-xs);
}

h3,
dt,
.article-heading {
    font-size: var(--step-1);
    font-weight: 600;
}
h1, h2, h3, dt, h1 + p {
    color: inherit;
}
h1 + p {
    font-weight: 300;
    font-size: var(--step-0);
    margin-block-start: var(--space-3xs);
}

ul, ol {
    margin-block: 0;
}
ol {
    counter-reset: foobar;
}
li + li {
    margin-block-start: var(--space-3xs);
}
ol:not(.price-list) li,
ul li {
    margin-inline-start: var(--space-l);
    list-style: none;
}
*:not(.price-list) li::before {
    position: absolute;
    margin-inline-start: calc(var(--space-l) * -1);
}
ol:not(.price-list) li::before {
    counter-increment: foobar;
    content: counter(foobar) '.';
}
ul li::before {
    content: '•';
}


input[type='radio'] {
    opacity: 0;
    position: absolute;
}

input,
textarea,
button,
input[type='radio'] + label {
    appearance: none;
    border-radius: var(--space-3xs);
    border: 1px solid rgba(var(--light-color), 1);
    color: rgba(var(--dark-color), 1);
    font-size: var(--step-0);
    padding: var(--space-2xs);
}

input[type='radio'] + label {
    color: rgba(var(--grey-color), 1);
}
input[type='radio'] + label.disabled {
    color: rgba(var(--grey-color), 0.25);;
}

input,
textarea {
    background: rgba(var(--grey-color), 1);
}

input[type='radio'] + label {
    cursor: pointer;
    background: var(--tint);
}

input,
textarea,
input[type='radio'] + label {
    --inset-shadow: inset 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
        inset 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.11),
        inset 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.11),
        inset 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.11);
    --offset-shadow: 0 0 rgba(var(--dark-color), 1);
    box-shadow: var(--inset-shadow), var(--offset-shadow);
}

input:focus,
textarea:focus,
button:focus,
button:hover,
input[type='radio']:focus + label {
    outline-color: transparent;
    outline-style: solid;
    --offset-shadow: 0 0 5px 2px rgba(var(--accent-color), 1);
}

button,
input[type='radio']:checked + label {
    background: rgba(var(--accent-color), 1);
    color: rgba(var(--dark-color), 1);
    cursor: pointer;
    box-shadow: var(--offset-shadow);
}

button:focus,
button:hover,
input[type='radio']:focus + label {
    border: 1px solid rgba(var(--accent-color), 1);
}

main *::selection {
    background: rgba(var(--light-color), 1);
    color: rgba(var(--dark-color), 1);
}

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.stack > * {
    margin-block: 0;
}
.stack > * + * {
    --space-stack: var(--space-s);
    margin-block-start: var(--space-stack, 1.5rem);
}

.stack > h3 + *,
.stack > dt + *,
.stack > .article-heading + * {
    --space-stack: var(--space-2xs);
}
.stack > * + h3,
.stack > * + dt,
.stack > * + .article-heading {
    --space-stack: var(--space-l);
}

.stack-large > * + * {
    --space-stack: var(--space-2xl);
}
.stack-small > * + * {
    --space-stack: var(--space-2xs);
}

.card {
    padding: var(--space-s);
    background: var(--tint);
    border-radius: var(--space-3xs);
}

.box {
    padding: var(--space-s);
}

.center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
}

.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-xl);
}
.with-sidebar > :first-child {
    flex-grow: 1;
    flex-basis: var(--space-4xl);
}
.with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 65%;
}

.space-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2xs);
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-xl);
    align-items: center;
}

.grid > * {
    flex-grow: 1;
    flex-basis: var(--space-4xl);
}

.grid-small {
    gap: var(--space-s) var(--space-3xs);
}
.grid-brochure {
    gap: var(--space-xl);
    align-items: flex-start;
    justify-content: center;
}
.grid-brochure > * {
    flex-basis: 0;
    min-inline-size: 30ch;
}

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.switcher > * {
    flex-grow: 1;
    flex-basis: calc(( 20rem - 100%) * 999);
}
.switcher > :nth-last-child(n+ 5),
.switcher > :nth-last-child(n+ 5) ~ * {
    flex-basis: 100%;
}

.icon {
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
}

.uppercase {
    text-transform: uppercase;
}
.text-align\:center {
    text-align: center;
}
.align-items\:center {
    align-items: center;
}

.branding-home {
    background-image: url("./logo.svg");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background
}
.branding-small {
    font-size: var(--step-2);
    font-weight: 200;
}
.branding-large {
    font-size: var(--step-6);
    font-weight: 200;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tint);
}

th {
    font-weight: 500;
    font-style: normal;
    color: rgba(var(--grey-color), 1);
}

td, th {
    padding: var(--space-2xs);
    text-align: inherit;
}

tr:has(> th) {
    border-block-end: 2px solid rgba(var(--accent-color), 1);
}

tr + tr ~ tr {
    border-block-start: 1px dotted rgba(var(--light-color), 1);
}

.profile svg {
    width: var(--space-4xl);
}
.profile img {
    width: var(--space-4xl);
    border-radius: var(--space-3xl);
    border: 2px solid rgba(var(--light-color), 1);
}

body > header,
body > footer {
    background-color: rgba(var(--dark-color), 1);
    color: rgba(var(--grey-color), 1);
    margin-inline: calc(var(--space-s) * -1);
    padding-inline: var(--space-s);
}

body > header {
    margin-block-start: calc(var(--space-s) * -1) !important;
    padding-block-start: var(--space-s);
    border-block-end: 1px solid rgba(var(--grey-color), 1);
}

body > footer {
    margin-block-end: calc(var(--space-s) * -1) !important;
    padding-block: var(--space-s);
    border-block-start: 1px solid rgba(var(--grey-color), 1);
}

body > footer > * > * {
    font-size: var(--step--1);
}
body > footer > * > *:last-child {
    font-size: var(--step--2);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid rgba(var(--grey-color), 0.6);
}
body > footer a,
a:has(> article) {
    color: rgba(var(--grey-color), 1);
    text-decoration: none;
}
body > footer a:hover,
body > footer a:focus,
body > footer a.current-page,
a:has(> article):hover,
a:has(> article):focus {
    color: rgba(var(--accent-color), 1);
}

.branding__contact {
    font-size: var(--step--1);
    line-height: 1.2;
    text-align: right;
}
.branding__contact a {
    color: rgba(var(--grey-color), 1);
    font-size: var(--step-0);
    text-decoration: none;
}


body > header nav a {
    border-block-end: 4px solid rgba(var(--dark-color), 1);
    color: rgba(var(--grey-color), 1);
    font-size: var(--step--1);
    font-weight: 300;
    padding-inline: var(--space-3xs);
    text-align: center;
    line-height: var(--space-l);
    text-decoration: none;
    text-transform: uppercase;
}
body > header nav a::first-letter {
    font-size: var(--step-0);
}

body > header .current-page,
body > header nav a:hover {
    border-block-end: 4px solid rgba(var(--accent-color), 1);
    color: rgba(var(--grey-color), 1);
}

.brochure-item header {
    color: rgba(var(--grey-color), 1);
    font-weight: 500;
    font-style: normal;
    padding: var(--space-2xs);
    background: var(--tint);
    border-block-end: 2px solid rgba(var(--accent-color), 1);
}

.brochure-item tr ~ tr {
    border-block-start: 1px dotted rgba(var(--light-color), 1);
}

* {
    max-inline-size: var(--measure);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.price-list {
    padding: 0;
}
.price-list div {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: end;
}

.price-list .description {
    position: relative;
    overflow: hidden;
}

.price-list .leaders::after {
    position: absolute;
    content: " . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . ";
    text-align: right;
}

.price-list .cost {
    min-width: 5ch;
    text-align: right;
}

.price-list .cost.total {
    font-size: var(--step-2);
}

select {
    background-color: rgba(var(--dark-color), 1);
    background-image: url("./arrow.svg");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 75%;
    border-radius: 0;
    border: none;
    border-block-end: 1px solid rgba(var(--accent-color), 1);
    color: inherit;
    padding: 0;
    padding-inline-end: 30px;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
select::-ms-expand {
    display: none;
}
@-moz-document url-prefix() {
    select {
        color: rgba(0, 0, 0, 0);
        text-shadow: 0 0 0 #ffffff;
    }
}