@font-face {
    font-family: "Hind";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/hind-300.woff2") format("woff2");
}

@font-face {
    font-family: "Hind";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/hind-400.woff2") format("woff2");
}

@font-face {
    font-family: "Hind";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/hind-500.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/alegreya-700.woff2") format("woff2");
}

/* Colours measured from the sdam.ch stylesheet, logo and footer image.
   Cyan and lime fail contrast against white and light grey: use them as shapes, never as text there. */
:root {
    --cyan: #00adda;
    --lime: #cbd300;
    --ground: #eeeeee;
    --panel: #ffffff;
    --text: #484848;
    --heading: #5a5a5a;
    --rule: #dddddd;
    --graphite: #2c2c2c;
    --footer-edge: #e1e1e1;

    --page-width: 74rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --logo-width: min(308px, 100vw - 2 * var(--gutter));

    /* One spacing scale: the closer two things belong together, the smaller the step between them
       (label to value, inside a group, between groups, between sections, page edge). */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2.5rem;
    --space-7: 4rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: "Hind", "Frutiger", "Segoe UI", Tahoma, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
}

h1,
h2,
h3,
p,
dl,
dd,
ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

address {
    font-style: normal;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--cyan);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.15s;
}

a:hover {
    text-decoration-color: var(--lime);
    text-decoration-thickness: 2px;
}

a:focus-visible {
    outline: 2px solid var(--graphite);
    outline-offset: 2px;
}

/* The logo PNG carries its own cyan strip (57 of its 84 px). The band has the same scaled
   height and sits at the same bottom edge, so both join without a seam at every logo width. */
.site-header {
    position: relative;
    padding-top: calc(var(--logo-width) * 16 / 308);
}

.site-header::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: calc(var(--logo-width) * 57 / 308);
    background: var(--cyan);
}

.site-header__inner {
    position: relative;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-header img {
    display: block;
    width: var(--logo-width);
    height: auto;
}

.page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
    max-width: var(--page-width);
    margin-inline: auto;
    padding: 0 var(--gutter) var(--space-7);
}

.intro {
    padding-top: var(--space-6);
}

.intro h1 {
    margin-bottom: var(--space-5);
    color: var(--heading);
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    text-wrap: balance;
}

.intro p {
    max-width: 36rem;
    text-wrap: pretty;
}

.intro__lead {
    margin-bottom: var(--space-4);
    font-size: 1.3125rem;
    line-height: 1.45;
}

.contact {
    margin-top: var(--space-5);
}

.contact p + p {
    margin-top: var(--space-4);
}

.contact__label {
    color: var(--graphite);
    font-weight: 500;
}

/* Blocks stack, never side by side: the holiday block is three times as tall as the regular one,
   which left a mostly empty white column beside it. Without it the regular block stands alone,
   so the switch needs no layout rule of its own. */
.hours {
    overflow: hidden;
    border-radius: 4px;
    background: var(--panel);
}

.hours__block {
    padding: 1.75rem;
}

.hours h2 {
    margin-bottom: var(--space-2);
    color: var(--heading);
    font-family: "Alegreya", Georgia, serif;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
}

.hours__days {
    font-weight: 500;
}

.hours__slots {
    margin-block: var(--space-1) var(--space-2);
    color: var(--heading);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.25;
}

.hours__slots span {
    display: block;
}

.hours__note {
    font-size: 0.9375rem;
}

/* Graphite on lime measures 8.55:1. */
.hours__block--holiday {
    container: holiday / inline-size;
    background: var(--lime);
    color: var(--graphite);
}

.hours__block--holiday h2,
.hours__block--holiday .hours__slots {
    color: var(--graphite);
}

/* Cyan and lime underlines vanish on the lime ground. */
.hours__block--holiday a,
.hours__block--holiday a:hover {
    text-decoration-color: var(--graphite);
}

.hours__block--holiday .hours__days {
    text-wrap: balance;
}

/* Three groups (closed, emergency, notes) with the same step between them. */
.emergency {
    max-width: 32rem;
    margin-block: var(--space-5);
}

.emergency__phone {
    margin-top: var(--space-1);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
}

.emergency__times {
    margin-top: var(--space-5);
}

.emergency__row {
    padding-block: var(--space-2);
    border-top: 1px dotted var(--graphite);
}

.emergency__row:last-child {
    border-bottom: 1px dotted var(--graphite);
}

.emergency__row dt {
    font-weight: 500;
}

.emergency__slot {
    white-space: nowrap;
}

/* Day and hours on one line once both fit; the 20rem side panel keeps them stacked. */
@container holiday (min-width: 28rem) {
    .emergency__row {
        display: grid;
        grid-template-columns: 12.5rem minmax(0, 1fr);
        column-gap: var(--space-4);
    }
}

.holiday__greeting {
    margin-top: var(--space-2);
}

.team {
    container: team / inline-size;
}

.figures {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 2px solid var(--cyan);
    margin-bottom: calc(var(--space-7) + var(--space-3));
}

/* Ground-coloured keyline separates overlapping figures, like the white outline in the logo. */
.figure polygon,
.figure circle {
    stroke: var(--ground);
    stroke-width: 3;
    paint-order: stroke;
}

.figure--cyan {
    fill: var(--cyan);
}

.figure--lime {
    fill: var(--lime);
}

.team h2 {
    color: var(--heading);
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    font-weight: 300;
    line-height: 1.2;
}

/* The section heading sits closer to the first department than the departments sit to each other. */
.department {
    margin-top: var(--space-6);
}

.team h2 + .department {
    margin-top: var(--space-5);
}

.department h3 {
    margin-bottom: var(--space-2);
    color: var(--heading);
    font-family: "Alegreya", Georgia, serif;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.25;
}

.person {
    padding-block: var(--space-3);
    border-top: 1px solid var(--rule);
}

.person:last-child {
    border-bottom: 1px solid var(--rule);
}

.person__name,
.person__role {
    display: block;
}

.person__name {
    color: var(--graphite);
    font-weight: 500;
}

.person__reach {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-5);
}

.person__phone {
    white-space: nowrap;
}

/* Two lines: name and function left, phone and mail right. */
@container team (min-width: 30rem) {
    .person {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-5);
    }

    .person__name {
        grid-area: 1 / 1;
    }

    .person__role {
        grid-area: 2 / 1;
    }

    .person__reach {
        display: contents;
    }

    .person__phone {
        grid-area: 1 / 2;
        text-align: right;
    }

    .person__mail {
        grid-area: 2 / 2;
        text-align: right;
    }
}

/* One line per person with aligned columns, as on the previous team page. */
@container team (min-width: 46rem) {
    .person {
        grid-template-columns: 8.5rem minmax(0, 1fr) 6rem 13.5rem;
        align-items: baseline;
        padding-block: var(--space-2);
    }

    .person__role {
        grid-area: 1 / 2;
    }

    .person__phone {
        grid-area: 1 / 3;
        text-align: left;
    }

    .person__mail {
        grid-area: 1 / 4;
        text-align: left;
    }
}

.site-footer {
    border-top: 6px solid var(--footer-edge);
    background: var(--graphite);
    color: var(--rule);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-7);
    max-width: var(--page-width);
    margin-inline: auto;
    padding: var(--space-6) var(--gutter);
}

.site-footer__label {
    color: var(--panel);
    font-weight: 500;
}

.site-footer a {
    text-decoration-color: var(--lime);
}

.site-footer a:hover {
    color: var(--lime);
}

.site-footer a:focus-visible {
    outline-color: var(--panel);
}

/* Two columns: the hours panel hangs from the cyan band beside the team list. */
@media (min-width: 1000px) {
    .page {
        grid-template-columns: minmax(0, 1fr) 20rem;
        grid-template-areas:
            "intro hours"
            "team  hours";
        column-gap: 3.5rem;
    }

    .intro {
        grid-area: intro;
        padding-top: 3.5rem;
    }

    .hours {
        grid-area: hours;
        align-self: start;
        border-radius: 0 0 4px 4px;
    }

    .team {
        grid-area: team;
    }
}

/* Sticky only where the whole panel fits the viewport: a taller sticky box hides its own end.
   Each threshold sits about 3em above the measured panel height; re-measure after changing the panel content. */
@media (min-width: 1000px) and (min-height: 18em) {
    .hours:not(:has(.hours__block--holiday)) {
        position: sticky;
        top: 0;
    }
}

@media (min-width: 1000px) and (min-height: 70em) {
    .hours {
        position: sticky;
        top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    a {
        transition: none;
    }
}