/* Fonts */

@font-face { font-family: Rubrik; src: url(/fonts/RubrikLight.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Rubrik; src: url(/fonts/Rubrik.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Rubrik; src: url(/fonts/RubrikMedium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Rubrik; src: url(/fonts/RubrikSemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }


/* Colors and sizes */

:root {
    --orange: #e3601b;
    --black: #000;
    --white: #fff;
    --grey: #f2f2f2;
    --line: #d9d9d9;
    --muted: #8a8a8a;
    --peach: #f2d9c9;
    --blue: #c4dbe8;
    --green: #cfe6d1;

    --width: 55rem;                 /* the page text and the cards */
    --text: 46rem;                  /* a column of running text */
    --gutter: max(1.25rem, (100vw - var(--width)) / 2);
    --radius: 0.5rem;
    --header: 5.8rem;
}


/* Basics */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 1rem); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: Rubrik, system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.8175rem;   /* 13.1px, as in the design */
    line-height: 1.735;     /* 22.7px */
    letter-spacing: 0.02em;
    color: var(--black);
    background: var(--white);
    overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; margin: 0 0 1rem; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 500; }
section.hero h1 { font-size: clamp(2.6rem, 6.16vw, 4.93rem); }   /* 79px at 1280 */
h2 { font-size: clamp(1.3rem, 1.92vw, 1.535rem); }   /* 24.6px at 1280 */
h3 { font-size: 1.15rem; }
p, ul, ol, blockquote, figure { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: calc(var(--width) + 2.5rem); margin: 0 auto; padding: 0 1.25rem; }


/* Header */

header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--white);
    box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 0.12);
}
header .container {
    max-width: calc(68rem + 2.5rem);   /* wider than the page */
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--header);
}
#logo { margin-right: auto; }
#logo img { width: 5.25rem; height: auto; }
/* The field opens to the left of the magnifying glass, over the header,
   so the glass stays where it is */
#search-bar { position: relative; display: flex; align-items: center; }
#search-bar input {
    position: absolute;
    right: 100%;
    top: 50%;
    translate: 0 -50%;
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    padding: 0.25rem 0;
    border: 0;
    border-bottom: 0.0625rem solid var(--orange);
    border-radius: 0;
    background: var(--white);
    font: inherit;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: width .3s, opacity .3s;
}
#search-bar input:focus { outline: none; }
#search-bar input::-webkit-search-decoration, #search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
#search-bar.open input { width: min(15rem, calc(100vw - 9rem)); opacity: 1; pointer-events: auto; }
/* On a phone there is no room next to the glass: the field is a bar under the header */
@media (max-width: 40rem) {
    #search-bar { position: static; }
    header .container { position: relative; }
    #search-bar input, #search-bar.open input {
        left: 0;
        right: 0;
        top: 100%;
        translate: none;
        width: auto;
        padding: 0.75rem 1.25rem;
        box-shadow: 0 0.25rem 0.375rem rgb(0 0 0 / 0.08);
        font-size: 1rem;
    }
}
#search-bar button { display: flex; padding: 0.5rem; border: 0; background: none; }
#search-bar button:hover { color: var(--orange); }

#xs-menu { position: relative; }
#xs-menu > button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 0;
    border-radius: 2rem;
    padding: 0.35rem 1rem 0.35rem 1.25rem;
    background: var(--orange);
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.08em;
}
#xs-menu > button[aria-expanded="true"] svg { transform: rotate(180deg); }
#xs-menu ul {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 13rem;
    margin: 0;
    padding: 0.6rem 0;
    list-style: none;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.15);
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.3rem);
    transition: opacity .2s, transform .2s, visibility .2s;
}
#xs-menu.open ul { opacity: 1; visibility: visible; transform: none; }
#xs-menu a { display: block; padding: 0.3rem 1.25rem; text-decoration: none; }
#xs-menu a:hover, #xs-menu a.active { color: var(--orange); }

#languages {
    display: flex;
    border: 0.0625rem solid var(--black);
    border-radius: 2rem;
    overflow: hidden;
    font-size: 0.8rem;
}
#languages a { padding: 0.3rem 0.6rem; text-decoration: none; }
#languages a.active { background: var(--black); color: var(--white); }


/* Sections */

main section { padding: 5rem 0; }
main section + section:not(.grey, .hero, .similar) { padding-top: 0; }
main section.hero + section { padding-top: 2.74rem; }
section.grey { background: var(--grey); }
main section.grey + section { padding-top: 5rem; }
section.centered, section.lead, section.statement { text-align: center; }
section.centered > .container > :is(p, h2), section.lead > .container > p, section.statement > .container > :is(p, h2) { margin-inline: auto; }
.carousel, .contact-form { text-align: left; }

.container > p, .container > ul, .container > ol, .container > h2, .container > h3 { max-width: var(--text); }
section.lead { padding-bottom: 3.31rem; }
section.lead > .container > p:not(.buttons) { max-width: 40rem; margin-bottom: 3.79rem; }
section.centered h2 { margin-bottom: 0.49rem; }
section.centered h2 + p { margin-bottom: 2.5rem; }
section.centered h2:last-of-type:not(:has(+ p)) { margin-bottom: 2rem; }
section.centered h2 + .carousel { margin-top: 0; }

section.statement p { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 44rem; margin-inline: auto; line-height: 1.55; }

section.title { padding: 3rem 0 2rem; }
section.title h1 { margin-bottom: 0.5rem; }
section.title p { font-size: 0.9rem; }

/* The history in two columns */
@media (min-width: 50rem) {
    section.columns .container { columns: 2; column-gap: 3rem; }
    section.columns h2 { column-span: all; margin-bottom: 1.5rem; }
    section.columns p { font-size: 0.9rem; break-inside: avoid-column; }
}

/* A quote next to the text; the facts of a case next to its intro */
@media (min-width: 50rem) {
    section.has-quote .container, section.intro .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 17rem;
        column-gap: 3.5rem;
        align-items: start;
    }
    section.has-quote .container > *, section.intro .container > * { grid-column: 1; }
    section.has-quote .container > blockquote, section.intro .container > aside { grid-column: 2; grid-row: 1 / span 30; }
    section.has-quote .container > .carousel, section.has-quote .container > figure.wide,
    section.intro .container > .carousel, section.intro .container > figure.wide { grid-column: 1 / -1; }
}
section.intro p, section.has-quote p { font-size: 0.95rem; line-height: 1.75; }
section.intro { padding-top: 3.5rem; }
blockquote {
    margin: 0 0 2rem;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 500;
    line-height: 1.5;
}
blockquote p { font-size: inherit !important; line-height: inherit !important; }
aside.facts { font-size: 0.85rem; line-height: 1.9; }
aside.facts h2 { font-size: 0.9rem; font-weight: 600; margin: 0.5rem 0 1rem; }

/* Photos */
figure { margin: 0; }
figure.wide { margin: 3rem calc(50% - 50vw); }
figure.wide img { width: 100%; max-height: 80vh; object-fit: cover; }
.container > .carousel { margin-top: 3rem; margin-bottom: 3rem; }
.container > .carousel:last-child, .container > figure.wide:last-child { margin-bottom: 0; }

/* Buttons */
p.buttons { text-align: center; max-width: none; margin: 2.54rem auto 0; }
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.63rem;
    padding: 0.4rem 1.09rem 0.45rem 1.13rem;   /* 35px high, as in the design */
    border: 0.0625rem solid var(--orange);
    border-radius: 2rem;
    background: var(--white);
    color: var(--black);
    font-size: 0.699rem;
    line-height: 1.735;
    text-decoration: none;
    transition: background .2s, color .2s;
}
/* The arrow, from the design: drawn in the colour of the text (a mask) */
.button::after {
    content: "";
    width: 0.542rem;
    height: 0.417rem;
    color: var(--orange);
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M11.75 4.91H.75M8 9.08l4.17-4.17L8 .75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s;
}
.button:hover::after { transform: translateX(0.2rem); }
.button.orange, .button:hover { background: var(--orange); color: var(--white); }
.button.orange::after, .button:hover::after { color: inherit; }
.button.orange { padding: 0.224rem 0.79rem 0.316rem 0.92rem; border: 0; }   /* 28px high, as in the design */
.button.small { font-size: 0.8rem; padding: 0.3rem 0.9rem; }


/* The photo at the top */

section.hero {
    position: relative;
    display: grid;
    place-items: center;
    height: 29.125rem;   /* 466px, as in the design */
    padding: 0;
    overflow: hidden;
    color: var(--white);
    background: #333;
}
section.hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s;
}
section.hero img.active { opacity: 1; }
section.hero h1 {
    position: relative;
    margin: 0;
    padding: 0 1.25rem;
    max-width: 60rem;
    text-align: center;
    text-shadow: 0 0 2rem rgb(0 0 0 / 0.25);
}
.hero-pause {
    position: absolute;
    bottom: 1.48rem;   /* 23.7px, as in the design */
    left: 50%;
    translate: -50% 0;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
}
/* The line that fills up until the next photo; every time it is full,
   the next photo shows (static/js/site.js) */
.hero-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.125rem;
    background: var(--white);
    transform-origin: left;
    animation: hero-progress 6s linear infinite;
}
.hero.paused .hero-progress { animation-play-state: paused; }
/* The photos also stand still while the navigation object is open */
body:has(#wheel.open) .hero-progress { animation-play-state: paused; }
/* and are slightly blurred, so the open navigation object stands out */
section.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: -webkit-backdrop-filter .5s, backdrop-filter .5s;
    pointer-events: none;
}
body:has(#wheel.open) section.hero::after { -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-pause .play, .hero-pause[aria-pressed="true"] .pause { display: none; }
.hero-pause[aria-pressed="true"] .play { display: inline; }


/* Carousels: from the left edge of the text to the right edge of the screen */

.carousel { position: relative; margin-right: calc(50% - 50vw); }
.carousel-track {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0 var(--gutter) 0 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > li { flex: 0 0 min(26rem, 80vw); scroll-snap-align: start; }
/* A row that starts at its second slide shows a bit of the first on the left */
.carousel[data-start] { margin-left: calc(50% - 50vw); }
.carousel[data-start] .carousel-track { padding-left: var(--gutter); scroll-padding-left: var(--gutter); }

.carousel-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-right: var(--gutter);
    font-size: 0.75rem;
}
.carousel[data-start] .carousel-nav { padding-left: var(--gutter); }
.carousel-nav.right { justify-content: flex-end; }
.carousel-count { margin-right: auto; }
.carousel-nav button { display: flex; padding: 0.2rem; border: 0; background: none; }
.carousel-nav button:disabled { opacity: 0.3; cursor: default; }
.carousel.no-scroll .carousel-nav button { display: none; }

/* Photos */
.carousel.gallery .carousel-track > li { flex-basis: min(26rem, 80vw); }
.carousel.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.carousel.gallery li:only-child { flex-basis: 100%; }

/* Case cards */
.case-card a { display: block; text-decoration: none; }
.case-card img { width: 100%; aspect-ratio: 13 / 10; object-fit: cover; border-radius: var(--radius); background: var(--grey); }
.case-card h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 1.42rem 0 0.34rem;
    font-size: 1.287rem;
}
.case-card p { font-size: 0.7075rem; line-height: 1.767; max-width: 22rem; }
.case-card a:hover h3 span:first-child { color: var(--orange); }
.icons { display: inline-flex; gap: 0.3rem; }
.icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
}
.icon svg { width: 100%; height: 100%; }
.carousel.cards { margin-bottom: 3.44rem; }
.carousel.cards + .carousel.cards { margin-top: 0; }
.carousel.cards:has(+ p.buttons) { margin-bottom: 0; }
.carousel.cards .carousel-track { gap: 2.0625rem; }
.carousel.cards .carousel-track > li { flex-basis: min(26.44rem, 80vw); }   /* 423px, as in the design */
/* The arrows of a row of cases: 20px under the photos, at the side where the
   row runs out of the screen (as in the design) */
.carousel.cards .carousel-nav { position: absolute; top: calc(min(26.44rem, 80vw) * 10 / 13 + 0.64375rem); right: var(--gutter); margin: 0; padding: 0; }
.carousel.cards[data-start] .carousel-nav { right: min(calc(100% - 4rem), calc(100% - var(--gutter) + 2.0625rem)); padding: 0; }   /* under the bit of the first case */
.carousel.cards .carousel-nav svg { width: 1rem; height: 1rem; }

/* Cards in a grid (similar cases, a theme) */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
    text-align: left;
}
.case-grid .case-card { border-radius: var(--radius); box-shadow: 0 0.0625rem 0.375rem rgb(0 0 0 / 0.16); overflow: hidden; background: var(--white); transition: box-shadow .2s; }
.case-grid .case-card:hover { box-shadow: 0 0 0 0.0625rem var(--orange), 0 0.125rem 0.625rem rgb(0 0 0 / 0.16); }
.case-grid .case-card img { border-radius: 0; aspect-ratio: 3 / 2; }
.case-grid .case-card h3 { font-size: 1rem; font-weight: 400; margin: 1rem 1.25rem 0.75rem; }
.case-grid .case-card h3 .icon { width: 1.5rem; height: 1.5rem; }
.case-grid .case-card p { margin: 0 1.25rem 1.75rem; }
section.similar h2 { text-align: center; margin: 0 auto 2rem; }

/* Services */
.carousel.services { margin-left: calc(50% - 50vw); text-align: left; }
.carousel.services .carousel-track { gap: 2.125rem; padding-left: max(1.25rem, 50vw - 31rem); scroll-padding-left: max(1.25rem, 50vw - 31rem); }
/* Cards of 308px; the second one is in the middle of the page, as in the design */
.carousel.services .carousel-track > li { flex-basis: min(19.25rem, 80vw); }
.carousel.services .carousel-nav { display: none; }
.service { height: 100%; padding: 1.25rem 1.25rem 1.44rem 1.5625rem; border-radius: var(--radius); background: var(--peach); }
.service.blue { background: var(--blue); }
.service.green { background: var(--green); }
.service h3 { font-size: 0.926rem; font-weight: 600; margin-bottom: 0.175rem; }
main section.centered:has(> .container > .carousel.services) { padding: 3.375rem 0 3.94rem; }
section.grey .carousel.services { margin-top: 3rem; }

/* Team */
.carousel.team { margin-bottom: 2.5rem; }
.carousel.team:first-of-type { margin-top: 2.5rem; }
.person img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--grey); }
.person h3 { font-size: 0.85rem; font-weight: 600; margin: 1.1rem 0 0.3rem; }
.person p { font-size: 0.8rem; line-height: 1.7; }

/* References */
/* The quotes: one at a time across the width of the text; the round
   arrows at the right edge, level with the portrait */
.carousel.quotes { margin: 0; }
.carousel.quotes .carousel-track { padding: 0; }
.carousel.quotes .carousel-track > li { flex-basis: 100%; }
.carousel.quotes .reference { max-width: 34rem; margin: 0 auto; }
.carousel.quotes .reference blockquote { margin-bottom: 1rem; }
main section:has(> .container > .carousel.quotes) { padding-top: 3.75rem; padding-bottom: 5rem; }
section.centered h2:has(+ .carousel.quotes) { margin-bottom: 1.1rem; }
.carousel.quotes .carousel-nav { padding: 0; margin-top: -3.125rem; height: 1.75rem; gap: 0.9rem; }
.carousel.quotes .carousel-nav button {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0.09375rem solid currentColor;
    border-radius: 50%;
}
.carousel.quotes .carousel-nav button:disabled { opacity: 0.4; }
.carousel.quotes .carousel-nav svg { width: 1rem; height: 1rem; }
.reference blockquote { font-size: inherit; font-weight: 400; line-height: inherit; margin-bottom: 1.5rem; }
.reference figcaption { display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-align: left; font-size: 0.55rem; line-height: 1.5; }
.reference figcaption strong { font-size: 0.706rem; font-weight: 400; }
.reference img, .reference .avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.reference .avatar { display: grid; place-items: center; background: var(--line); font-size: 1.5rem; }
section.references { text-align: center; }
section.references h2 { margin-inline: auto; }
.carousel.quotes { text-align: center; }
section.references .reference { max-width: 34rem; margin: 0 auto; }

/* Brands */
/* Grey logos in rows of seven across the width of the screen, as in the design */
.brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none !important;
    margin: 0 calc(50% - 50vw);
    padding: 0;
    list-style: none;
}
.brands li { display: grid; place-items: center; width: calc(100% / 7); height: 8.75rem; }
.brands img { max-width: 10rem; max-height: 6.25rem; width: auto; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; }
@media (max-width: 50rem) { .brands li { width: calc(100% / 3); height: 6rem; } .brands img { max-width: 80%; max-height: 5rem; } }
main section:has(> .container > .brands) { padding: 3.25rem 0 0.7rem; }

/* Map */
.map { height: 25rem;   /* 400px, as in the design */ margin: 0 calc(50% - 50vw); background: #e8e8e8; z-index: 0; }
/* Turns the lilac grey sea of the map into a light grey (#e5e5e5); the land becomes white */
.map .leaflet-tile-pane { filter: grayscale(1) brightness(1.1); }
.map-pin { width: 0.75rem; height: 0.75rem; border: 0.15625rem solid var(--white); border-radius: 50%; background: #3f7fbf; }
.map-pin.case { background: var(--orange); }
main section:has(> .container > .map) { padding-bottom: 4.375rem; }
section.centered h2 + p:has(+ .map) { margin-bottom: 1.81rem; }

/* Contact form */
.contact-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.155rem 2.125rem;
    max-width: 40.625rem;   /* 650px, as in the design */
    margin: 0 auto;
    text-align: left;
}
.contact-form label { display: block; }
.contact-form label.full, .contact-form .buttons { grid-column: 1 / -1; }
/* The labels are the grey text on the line of a field (its placeholder); the label itself is for screen readers */
.contact-form span { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); }
.contact-form ::placeholder { color: var(--muted); opacity: 1; }
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 0 0 0.3125rem;
    border: 0;
    border-bottom: 0.0625rem solid var(--black);
    border-radius: 0;
    background: transparent;
    font: inherit;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--orange); }
.contact-form textarea { display: block; height: 6.25rem; resize: vertical; }
.contact-form .buttons { margin-top: 1.19rem; }
main section:has(> .container > .contact-form) { padding: 3.6rem 0 3.33rem; }
main section:has(> .container > .contact-form) h2 { margin-bottom: 0.67rem; }
main section:has(> .container > .contact-form) h2 + p { margin-bottom: 1.4375rem; }
.form-pixel { position: absolute; opacity: 0; pointer-events: none; }

/* Video */
.video { position: relative; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* Cases overview */
section.case-rows { padding-top: 1rem; }
section.title .filter { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
section.title .filter .icon { margin-right: 0.4rem; }
.filter-theme { display: inline-flex; align-items: center; font-weight: 500; font-size: 1.2rem; }

/* A theme */
section.theme h1 { margin-bottom: 1.25rem; }
.theme-text { display: flex; gap: 1.25rem; max-width: 40rem; }
.theme-text .icon { width: 2.6rem; height: 2.6rem; }
.theme-text p { font-size: 0.95rem; line-height: 1.75; }
.theme-list { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0; list-style: none; max-width: none !important; margin-top: 2rem; }
.theme-list a { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.theme-list a:hover { color: var(--orange); }

/* Search */
.search input { width: 100%; padding: 0.5rem 0; border: 0; border-bottom: 0.0625rem solid var(--orange); border-radius: 0; font: inherit; font-size: 1.2rem; }
.search input:focus { outline: none; }
.search-results { margin-top: 2.5rem; }


/* The navigation object */

/* The size of the wheel is animated itself, not scaled with a transform:
   Firefox draws a scaled-down wheel jagged */
@property --size { syntax: "<length>"; inherits: true; initial-value: 22rem; }
#wheel {
    --size: 11.79rem;   /* closed: 54% of open */
    --radius: calc(var(--size) * 0.436);   /* to the middle of the icons; as in the design */
    position: fixed;
    z-index: 20;   /* under the header, also when open */
    /* Closed, it is a smaller version with its centre on the right edge of
       the screen, 227px under the top of the hero, as in the design. It is
       placed by its centre (translate), so its position does not depend on
       its size while that changes */
    top: calc(var(--header) + 14.1875rem);
    right: 0.15625rem;
    width: var(--size);
    height: var(--size);
    translate: 50% -50%;
    transition: --size .5s cubic-bezier(.3, .7, .3, 1), translate .5s cubic-bezier(.3, .7, .3, 1), top .5s, right .5s;
}
/* Open, its centre is 47% down the hero photo (--open-center, set by static/js/site.js), as in the design,
   or in the middle of the screen on a page without one */
#wheel.open { --size: 22rem; top: var(--open-center, calc(50% + var(--header) / 2)); right: 50%; translate: 50% -50%; }
.wheel-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; }
/* Open, the photo behind the wheel is blurred more, in a large circle that
   fades out; cut off at the edges of the hero photo (--glow-clip, set by
   static/js/site.js) */
.wheel-disc::before {
    content: "";
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
    mask: radial-gradient(closest-side, #000 40%, transparent);
    clip-path: var(--glow-clip, inset(50%));
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
}
#wheel.open .wheel-disc::before { opacity: 1; }
/* The disc is built from four layers, from bottom to top: the veil with
   the lines, the star, the slogan on its black bar and the icons. All but
   the slogan turn at their own pace when the wheel opens, and back when it
   closes (a full turn, or a turn that the layer looks the same after); a
   click on the slogan turns them once more (--spins, static/js/site.js) */
.wheel-veil, .wheel-star, .wheel-bar, #wheel ul { position: absolute; inset: 0; }
.wheel-veil { z-index: 0; transition: rotate .5s cubic-bezier(.3, .7, .3, 1); }
.wheel-star { z-index: 1; transition: rotate .6s cubic-bezier(.3, .7, .3, 1); }
.wheel-bar { z-index: 2; pointer-events: none; }
#wheel ul { z-index: 3; transition: rotate 1.6s cubic-bezier(.3, .7, .3, 1); }
#wheel.open .wheel-veil { rotate: calc(-90deg * (1 + var(--spins, 0))); }
#wheel.open .wheel-star { rotate: calc(180deg * (1 + var(--spins, 0))); }
#wheel.open ul { rotate: calc(-360deg * (1 + var(--spins, 0))); }
#wheel.still .wheel-veil, #wheel.still .wheel-star, #wheel.still ul { transition: none; }
/* The veil, see-through white (PDF page 2); its edge runs through the middle of the icons */
.wheel-veil::before {
    content: "";
    position: absolute;
    inset: calc(50% - var(--radius));
    border-radius: 50%;
    background: rgb(255 255 255 / 0.25);
}
/* The star in the middle: four rounded bars, black in the middle and light grey at the ends */
.wheel-star, .wheel-bar { display: grid; place-items: center; }
.wheel-star i {
    position: absolute;
    width: calc(var(--radius) * 0.23);
    height: calc(var(--radius) * 1.24);
    border-radius: 3rem;
    background: linear-gradient(#d6d6d6 8%, #000 46%, #000 54%, #d6d6d6 92%);
}
.wheel-star i:nth-child(2) { rotate: 45deg; }
.wheel-star i:nth-child(3) { rotate: 90deg; }
.wheel-star i:nth-child(4) { rotate: -45deg; }
/* The icons layer covers the whole disc, but only the icons take clicks */
#wheel ul { margin: 0; padding: 0; list-style: none; pointer-events: none; }
#wheel li {
    --angle: calc(var(--i) * 360deg / var(--n));
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
/* Four white lines across the veil, at 0, 45, 90 and 135 degrees, under the star (as in the design) */
.wheel-veil { display: grid; place-items: center; }
.wheel-veil i { position: absolute; width: 0.0625rem; height: calc(var(--radius) * 2); background: var(--white); }
.wheel-veil i:nth-child(2) { rotate: 45deg; }
.wheel-veil i:nth-child(3) { rotate: 90deg; }
.wheel-veil i:nth-child(4) { rotate: -45deg; }
#wheel li a {
    pointer-events: auto;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    text-decoration: none;
    transform: rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1)) translate(-50%, -50%);
    transform-origin: 0 0;
}
/* The icon with a thin white ring, drawn as a gradient: a border or shadow
   looks jagged, as the icons are moved into place with a transform */
#wheel li .icon {
    --fill: var(--black);
    position: relative;
    z-index: 1;
    width: calc(var(--radius) * 0.255 + 0.125rem);   /* 39px open */
    height: calc(var(--radius) * 0.255 + 0.125rem);
    border-radius: 0;
    background: radial-gradient(closest-side, var(--fill) calc(100% - 0.1rem), var(--white) calc(100% - 0.0625rem), var(--white) calc(100% - 0.0375rem), transparent 100%);
}
#wheel li a:hover .icon, #wheel li a:focus-visible .icon, #wheel li a.active .icon { --fill: var(--orange); }
/* The name of a theme, in an orange pill with a white edge (like the icon
   on hover), on the outside of the wheel, the same distance (--gap) from
   its icon all round: in line with the centre of the wheel and the icon
   (--angle), but flattened towards level with the icon (--dx, --dy), is
   the centre of the round end of the pill nearest to the icon (--x: 1 on
   the right, -1 on the left), or of the middle of the pill right above or
   under the wheel (--x: 0). On hover it grows out of the icon */
#wheel .label {
    --gap: 0.4rem;
    --h: 1.5rem;   /* the height of the pill */
    --x: clamp(-1, 1000 * sin(var(--angle)), 1);
    --dx: calc(sin(var(--angle)) / hypot(sin(var(--angle)), 0.5 * cos(var(--angle))));
    --dy: calc(-0.5 * cos(var(--angle)) / hypot(sin(var(--angle)), 0.5 * cos(var(--angle))));
    position: absolute;
    left: calc(50% + (50% + var(--gap) + var(--h) / 2) * var(--dx));
    top: calc(50% + (50% + var(--gap) + var(--h) / 2) * var(--dy));
    height: var(--h);
    padding: 0 0.7rem;
    line-height: 1.71875;   /* the height of the pill minus its borders */
    border: 0.0625rem solid var(--white);
    border-radius: 2rem;
    background: var(--orange);
    color: var(--white);
    font-size: 0.8rem;
    white-space: nowrap;
    text-transform: lowercase;
    translate: calc(-50% + (50% - var(--h) / 2) * var(--x)) -50%;
    transform-origin: calc(50% - (50% - var(--h) / 2) * var(--x)) 50%;
    opacity: 0;
    transform: translate(calc(-1.5rem * sin(var(--angle))), calc(1.5rem * cos(var(--angle)))) scale(0.2);
    transition: opacity .2s, transform .3s cubic-bezier(.3, .7, .3, 1);
    will-change: transform, opacity;
    pointer-events: none;
}
#wheel li a:hover .label, #wheel li a:focus-visible .label { opacity: 1; transform: none; }
/* The slogan on a black bar the size of the bars of the star, centred the
   same way so it covers the horizontal one exactly (a hair wider against
   its light edge); it does not turn */
.wheel-center {
    position: absolute;
    display: grid;
    place-items: center;
    width: calc(var(--radius) * 1.24);
    height: calc(var(--radius) * 0.23);
    padding: 0;
    border: 0;
    border-radius: 3rem;
    background: var(--black);
    box-shadow: 0 0 0 0.03125rem var(--black);
    pointer-events: auto;
    color: var(--orange);
    font-size: calc(var(--radius) * 0.0886);   /* 13.6px open */
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.wheel-open { position: absolute; z-index: 4; inset: 0; border: 0; border-radius: 50%; background: none; }
#wheel.open .wheel-open { display: none; }
/* The close button, above the ring on the right, as in the design (PDF page 2) */
.wheel-close {
    --button: calc(var(--radius) * 0.183);
    position: absolute;
    z-index: 4;
    top: calc(50% - var(--radius) * 1.041 - var(--button) / 2);
    left: calc(50% + var(--radius) * 1.268 - var(--button) / 2);
    display: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--white);
}
.wheel-close svg { width: var(--button); height: var(--button); }
#wheel.open .wheel-close { display: flex; }

@media (max-width: 40rem) {
    #wheel { --size: 9.11rem; top: calc(100% - 5.56rem); }
    #wheel.open { --size: 17rem; top: var(--open-center, 50%); }
}


/* Footer */

#footer { background: var(--black); color: var(--white); padding: 2.85rem 0 3rem; font-size: 0.71rem; line-height: 1.64; }
#footer p { margin-bottom: 1.16rem; }
#footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem 2.75rem; }
#footer h2 { font-size: 0.808rem; font-weight: 600; margin-bottom: 1.16rem; }
#footer ul { margin: 0; padding: 0; list-style: none; line-height: 1.5; }
#footer a { text-decoration: none; }
#footer a:hover { color: var(--orange); }
#footer .button:hover { color: var(--white); }
.footer-logo img { width: 3.6rem; height: auto; }
.socials { display: flex; gap: 0.5rem; margin-top: 2rem; }
.socials svg { display: block; width: 1.5rem; height: 1.5rem; }
#colophon { padding: 1.25rem 0; font-size: 0.704rem; }
#colophon ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.6rem; margin: 0; padding: 0; list-style: none; }
#colophon li + li::before { content: "•"; margin-right: 0.6rem; }
#colophon a { text-decoration: none; }
#colophon a:hover { color: var(--orange); }


/* Small screens */

@media (max-width: 40rem) {
    :root { --header: 4.5rem; }
    #logo img { width: 4rem; }
    header .container { gap: 0.5rem; }
    main section { padding: 3.5rem 0; }
    .carousel-track { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}