/* Hotel "The Castle" (Хотел „Замъкът“), Samokov.
   Dusk at the castle, from the hotel's own winter photo: a violet sky, amber light in the pointed-arch
   windows, limestone blocks, the pine slope behind, and the charcoal plate of the logo for header and footer.
   Phone first; every colour is a custom property. */

@font-face {
    font-family: "Cormorant Unicase";
    src: url("../fonts/cormorant-unicase-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

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

:root {
    --dusk-900: #262145;   /* the pines against the sky */
    --dusk-800: #2f2a55;
    --dusk-700: #3d3870;
    --dusk-600: #4b4580;
    --dusk-400: #6d6aa7;   /* the sky of the winter photo, measured */
    --dusk-100: #e7e3f5;
    --amber: #ffd27a;      /* light in the windows */
    --amber-hot: #ffe2a8;
    --rose: #bf7889;       /* lamp light on the snow, measured */
    --stone: #e9e6dd;      /* limestone blocks */
    --plaster: #f4f2ec;
    --joint: #cfc9ba;
    --pine: #24372a;
    --pine-100: #e2ebdc;
    --plate: #2b2926;      /* the plate of the logo, measured */
    --red: #a8341a;        /* the red of "castle" in the logo, a step deeper for text */
    --ink: #26221f;
    --ink-soft: #4f4a45;

    --display: "Cormorant Unicase", "Times New Roman", serif;
    --text: "Carlito", Calibri, "Segoe UI", Arial, sans-serif;
    --wrap: 72rem;
    --m: 20px;             /* one merlon of the battlement line */
    --lb-bg: rgb(27 23 50 / .96);
    --lb-text: #f4f2ec;
    --lb-accent: #ffd27a;
    --lb-accent-soft: rgb(255 210 122 / .24);
    --lancet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170' preserveAspectRatio='none'%3E%3Cpath d='M0 170V75A80 80 0 0 1 50 .8 80 80 0 0 1 100 75V170Z'/%3E%3C/svg%3E");
    --masonry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='88'%3E%3Cpath d='M0 .5h136M0 44.5h136M.5 0v44M68.5 44v44' stroke='%2326221f' stroke-opacity='.1' fill='none'/%3E%3C/svg%3E");
}

@media (min-width: 48rem) {
    :root { --m: 28px; }
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    background: var(--plaster);
    color: var(--ink);
    font: 400 1.125rem/1.6 var(--text);
    overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

h1,
h2,
h3 {
    margin: 0 0 .5em;
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.005em;
    text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 5.4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); }

p { margin: 0 0 1em; }

a { color: var(--dusk-700); text-underline-offset: .18em; }
a:hover { color: var(--red); }

:focus-visible {
    outline: 3px solid var(--dusk-600);
    outline-offset: 3px;
    border-radius: 3px;
}

.top :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.season :focus-visible,
.foot :focus-visible { outline-color: var(--amber); }

.wrap {
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
}

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

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 50;
    padding: .6rem 1rem;
    background: var(--amber);
    color: var(--ink);
    font-weight: 700;
    border-radius: 0 0 6px 6px;
}

.skip:focus { top: 0; }

/* ---------- buttons: cut stone blocks, not pills ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .65rem 1.3rem;
    border: 2px solid transparent;
    border-radius: 6px;
    font: 700 1.0625rem/1.2 var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}

.btn:active { transform: translateY(1px); }

.btn-light { background: var(--amber); color: var(--ink); }
.btn-light:hover { background: var(--amber-hot); color: var(--ink); }

.btn-ghost { border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--dusk-800); }

.btn-dusk { background: var(--dusk-700); color: #fff; }
.btn-dusk:hover { background: var(--dusk-800); color: #fff; }

.btn-ink { border-color: var(--ink); color: var(--ink); }
.btn-ink:hover { background: var(--ink); color: var(--amber); }

/* ---------- header: the plate of the logo ---------- */

.top {
    background: var(--plate);
    color: var(--stone);
}

.top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .75rem;
    padding-top: .4rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-right: auto;
    color: var(--stone);
    text-decoration: none;
}

.brand img {
    display: block;
    width: auto;
    height: 50px;
}

.brand-name {
    display: none;
    font: 700 1.3rem/1 var(--display);
}

.brand:hover { color: var(--amber); }

.lang {
    display: flex;
    font-size: .9375rem;
    font-weight: 700;
    border: 1px solid #5c5852;
    border-radius: 6px;
    overflow: hidden;
}

.lang a,
.lang span {
    padding: .3rem .55rem;
    color: var(--stone);
    text-decoration: none;
}

.lang span { background: var(--stone); color: var(--plate); }
.lang a:hover { background: #45413c; color: var(--amber); }

.call {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border-radius: 6px;
    background: var(--amber);
    color: var(--ink);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.call:hover { background: var(--amber-hot); color: var(--ink); }

.nav {
    order: 5;
    flex: 1 0 100%;
    display: flex;
    gap: .15rem;
    margin: .2rem -1rem 0;
    padding: 0 .55rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav a {
    flex: none;
    padding: .55rem .45rem .7rem;
    color: var(--stone);
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    /* the mark of the current page is a little battlement line */
    background: repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 10px) no-repeat left .45rem bottom .3rem / 0 4px;
    transition: background-size .2s;
}

.nav a:hover { color: var(--amber); }

.nav a[aria-current="page"] {
    color: var(--amber);
    font-weight: 700;
    background-size: calc(100% - .9rem) 4px;
}

@media (min-width: 34rem) {
    .brand-name { display: block; }
}

@media (min-width: 62rem) {
    .top {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgb(43 41 38 / .95);
        backdrop-filter: blur(10px);
    }

    .top-row { padding-block: .35rem; column-gap: 1rem; }
    .brand img { height: 56px; }

    .nav {
        order: 0;
        flex: 0 1 auto;
        margin: 0 .5rem 0 0;
        padding: 0;
        overflow: visible;
    }

    .nav a { padding-inline: .6rem; font-size: 1.0625rem; background-position: left .6rem bottom .3rem; }
    .nav a[aria-current="page"] { background-size: calc(100% - 1.2rem) 4px; }
}

/* ---------- the dusk sky: home hero and the head of every page ---------- */

.hero,
.page-hero {
    position: relative;
    z-index: 1;
    color: #fff;
    background-color: var(--dusk-700);
    background-image:
        radial-gradient(75% 42% at 70% 100%, rgb(191 120 137 / .5), transparent 72%),
        linear-gradient(180deg, var(--dusk-800) 0%, var(--dusk-700) 40%, var(--dusk-600) 72%, var(--dusk-400) 100%);
}

/* the pine slope behind the hotel, drawn */
.hero::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: clamp(74px, 12vw, 150px);
    background: url("../img/pines.svg") repeat-x left bottom / auto 100%;
    z-index: -1;
}

/* the battlement line: the limestone wall of the next section begins here */
.hero::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: calc(var(--m) * 1.15);
    background:
        linear-gradient(var(--stone), var(--stone)) left bottom / 100% 3px no-repeat,
        repeating-linear-gradient(90deg, var(--stone) 0 calc(var(--m) * 1.3), transparent calc(var(--m) * 1.3) calc(var(--m) * 2.1));
    z-index: -1;
}

.hero { padding-top: clamp(1.75rem, 5vw, 4rem); }

.hero-grid {
    display: grid;
    gap: 1.75rem;
}

.hero h1 {
    margin: 0 0 .28em;
    font-size: clamp(3rem, 18vw, 6.4rem);
    line-height: .92;
    color: var(--amber);
    text-shadow: 0 0 34px rgb(255 190 90 / .28);
}

.hero h1 span {
    display: block;
    margin-bottom: .12em;
    font-size: .42em;
    letter-spacing: .02em;
    color: #fff;
    text-shadow: none;
}

.hero-line {
    margin: 0 0 .6rem;
    font-size: clamp(1.25rem, 4.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.hero .lead {
    max-width: 34rem;
    margin-bottom: 1.4rem;
    color: #fff;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-actions .btn-light { font-size: 1.1875rem; }

.hero-photo {
    margin: 0;
    padding-bottom: calc(var(--m) * 1.15 + clamp(2.6rem, 9vw, 4rem));
}

.hero-photo a { display: block; border-radius: 10px; }

.hero-photo img {
    display: block;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    border: 6px solid var(--plaster);
    border-radius: 10px;
    box-shadow: 0 34px 60px -24px rgb(18 14 42 / .75);
}

@media (min-width: 62rem) {
    .hero-grid {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 3.5rem;
        align-items: end;
    }

    .hero-copy { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
    .hero-photo { margin-bottom: -4.5rem; padding-bottom: 0; }
}

.page-hero { padding: clamp(2rem, 6vw, 4rem) 0 calc(var(--m) + clamp(4.5rem, 12vw, 9rem)); }

.page-hero h1 {
    margin: 0 0 .3em;
    font-size: clamp(2.5rem, 10vw, 5rem);
    line-height: .96;
    color: var(--amber);
    text-shadow: 0 0 34px rgb(255 190 90 / .28);
}

.page-hero .lead {
    max-width: 40rem;
    margin: 0;
    color: #fff;
}

.lead { font-size: clamp(1.1875rem, 2.6vw, 1.3125rem); line-height: 1.5; }

/* ---------- the limestone wall and its arcade of lit windows ---------- */

.wall {
    background-color: var(--stone);
    background-image: var(--masonry);
    padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(3rem, 8vw, 5.5rem);
}

.wall-grid {
    display: grid;
    gap: 2.25rem;
    align-items: center;
}

.arcade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.55rem, 2.4vw, 1.4rem);
    max-width: 54rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arcade li {
    max-width: 210px;                 /* the photos are 357 px high: never enlarged */
    filter: drop-shadow(0 0 16px rgb(255 196 96 / .7)) drop-shadow(0 10px 14px rgb(38 34 31 / .28));
}

.arcade a {
    position: relative;
    display: block;
    aspect-ratio: 10 / 17;
    padding: clamp(3px, .9vw, 6px);
    background: var(--amber);
    -webkit-mask: var(--lancet) center / 100% 100% no-repeat;
    mask: var(--lancet) center / 100% 100% no-repeat;
}

.arcade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--x, 50%) 50%;   /* which part of the photo the window shows */
    -webkit-mask: var(--lancet) center / 100% 100% no-repeat;
    mask: var(--lancet) center / 100% 100% no-repeat;
    transition: transform .5s;
}

/* the window bars: a mullion and a transom at the spring of the arch */
.arcade a::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#3a261d, #3a261d) center / 3px 100% no-repeat,
        linear-gradient(#3a261d, #3a261d) left 0 top 44% / 100% 3px no-repeat;
    opacity: .85;
    transition: opacity .3s;
}

.arcade a:hover::after,
.arcade a:focus-visible::after { opacity: 0; }

.arcade a:hover img,
.arcade a:focus-visible img { transform: scale(1.06); }

.arcade li:focus-within {
    outline: 3px solid var(--dusk-600);
    outline-offset: 4px;
    border-radius: 3px;
}

.arcade a:focus-visible { outline: none; }

.wall-copy h2 { margin-bottom: .45em; }
.wall-copy p { max-width: 36rem; }

@media (min-width: 62rem) {
    .wall-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
        gap: 3.5rem;
    }

    /* the photo of the hero stands in front of the wall here: room for it */
    .hero + .wall { padding-top: 8.5rem; }
}

/* ---------- sections ---------- */

.band { padding: clamp(3rem, 8vw, 6rem) 0; }
.band-stone { background: var(--stone); }
.band-tight { padding-block: clamp(2.25rem, 6vw, 4rem); }

.section-head { max-width: 44rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.section-head p { margin: 0; color: var(--ink-soft); }

/* ---------- the price board ---------- */

.rates-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.rates-copy ul {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.rates-copy li {
    position: relative;
    padding: .55rem 0 .55rem 1.6rem;
    border-top: 1px solid var(--joint);
}

.rates-copy li::before,
.season li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: .7rem;
    height: .7rem;
    background: var(--red);
}

.board {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--ink);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    font-variant-numeric: lining-nums tabular-nums;
}

.board caption {
    caption-side: bottom;
    padding-top: .7rem;
    text-align: left;
    font-size: 1rem;
    color: var(--ink-soft);
}

.board th,
.board td {
    padding: .85rem .7rem;
    text-align: left;
    vertical-align: baseline;
    border-top: 1px solid var(--joint);
}

.board thead th {
    border-top: 0;
    font-size: 1rem;
    font-weight: 700;
    background: var(--plaster);
}

.board tbody th {
    font-weight: 700;
    line-height: 1.3;
}

.board tbody th small {
    display: block;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.board td {
    font: 700 clamp(1.5rem, 6vw, 2.25rem)/1 var(--display);
    white-space: nowrap;
}

.board .s { background: var(--pine-100); color: var(--pine); }
.board .w { background: var(--dusk-100); color: var(--dusk-800); }
.board thead .s { background: var(--pine); color: #fff; }
.board thead .w { background: var(--dusk-700); color: #fff; }

@media (min-width: 62rem) {
    .rates-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; }
    .board th,
    .board td { padding: 1.05rem 1.4rem; }
}

/* ---------- winter and summer, side by side ---------- */

.seasons { display: grid; }

.season {
    padding: clamp(2.5rem, 8vw, 5rem) 0;
    color: #fff;
}

.season-winter { background: var(--dusk-700); }
.season-summer { background: var(--pine); }

.season-in {
    width: min(100% - 2rem, 34rem);
    margin-inline: auto;
}

.season h2 {
    margin-bottom: .2em;
    font-size: clamp(3.4rem, 15vw, 6.5rem);
    line-height: .9;
}

.season-winter h2 { color: #d9d3ff; }
.season-summer h2 { color: #cfe6a8; }

.season .lead { margin-bottom: 1.25rem; }

.season ul {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.season li {
    position: relative;
    padding: .6rem 0 .6rem 1.6rem;
    border-top: 1px solid rgb(255 255 255 / .28);
}

.season li::before { background: var(--amber); }

.season figure { margin: 0; }

.season figure a { display: block; border-radius: 8px; }

.season figure img {
    display: block;
    width: 100%;
    max-width: 605px;
    border-radius: 8px;
}

.season figcaption {
    margin-top: .5rem;
    font-size: 1rem;
    color: #fff;
}

@media (min-width: 62rem) {
    .seasons { grid-template-columns: 1fr 1fr; }
}

/* ---------- trips: destinations as a course of stone blocks ---------- */

.trips-grid {
    display: grid;
    gap: 2rem;
}

.trip h3 { margin-bottom: .4em; }
.trip p { color: var(--ink-soft); }

.blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.blocks li {
    flex: 1 1 auto;
    padding: .55rem .9rem;
    background: var(--plaster);
    border: 1px solid var(--joint);
    border-radius: 3px;
    font-weight: 700;
    text-align: center;
}

.band-stone .blocks li { background: #fbfaf6; }

@media (min-width: 62rem) {
    .trips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
}

/* ---------- distances: one bar per place, as long as the road ---------- */

.road-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.road {
    margin: 0;
    padding: 0;
    list-style: none;
}

.road li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem 1rem;
    align-items: baseline;
    padding: .7rem 0 .8rem;
    border-top: 1px solid var(--joint);
}

.road li::after {
    content: "";
    grid-column: 1 / -1;
    width: max(.5rem, calc(var(--km) / 90 * 100%));
    height: .5rem;
    background: var(--dusk-600);
    border-radius: 0 3px 3px 0;
}

.road-km {
    font: 700 1.5rem/1 var(--display);
    font-variant-numeric: lining-nums;
    color: var(--dusk-800);
    white-space: nowrap;
}

.road-note { color: var(--ink-soft); }

@media (min-width: 62rem) {
    .road-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; }
}

/* ---------- a notice with a photo (the restaurant) ---------- */

.notice {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.notice figure { margin: 0; }
.notice figure a { display: block; border-radius: 8px; }

.notice img {
    display: block;
    width: 100%;
    max-width: 605px;
    border-radius: 8px;
}

.notice-flag {
    display: inline-block;
    margin-bottom: .9rem;
    padding: .3rem .7rem;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    border-radius: 3px;
}

@media (min-width: 48rem) {
    .notice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

/* ---------- photos ---------- */

.photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.photos li { display: flex; }

.photos a {
    flex: 1;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: var(--joint);
}

.photos img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 605 / 357;
    object-fit: cover;
    transition: transform .4s;
}

.photos a:hover img,
.photos a:focus-visible img { transform: scale(1.05); }

.photos .wide { grid-column: 1 / -1; }
.photos .wide img { aspect-ratio: 800 / 645; }

.gallery-group + .gallery-group { margin-top: clamp(2.5rem, 7vw, 4.5rem); }

@media (min-width: 40rem) {
    .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
    .photos .wide { grid-column: span 2; grid-row: span 2; }
}

@media (min-width: 62rem) {
    .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- the call band: window light at full width ---------- */

.callband {
    background: var(--amber);
    color: var(--ink);
    padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.callband-grid {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

.callband h2 {
    margin: 0 0 .15em;
    font-family: var(--text);
    font-size: 1.1875rem;
    letter-spacing: 0;
}

.big-phone {
    display: inline-block;
    font: 700 clamp(2.3rem, 10.5vw, 4.6rem)/1 var(--display);
    font-variant-numeric: lining-nums;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.big-phone:hover { color: var(--red); }

.callband p { margin: .5rem 0 0; }
.callband a:not(.btn):not(.big-phone) { color: var(--ink); font-weight: 700; }

@media (min-width: 62rem) {
    .callband-grid { grid-template-columns: 1fr auto; gap: 3rem; }
}

/* ---------- contact ---------- */

.contact-grid {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

/* beside the form the number has half the page: a step smaller than in the call band */
.contact-grid .big-phone { font-size: clamp(2.1rem, 9.5vw, 3.6rem); }

.phone-label {
    margin: 0 0 .2em;
    font: 700 1.1875rem/1.3 var(--text);
    letter-spacing: 0;
}

.contact-list {
    margin: 1.5rem 0 0;
}

.contact-list div {
    padding: .8rem 0;
    border-top: 1px solid var(--joint);
}

.contact-list dt {
    font-size: 1rem;
    color: var(--ink-soft);
}

.contact-list dd {
    margin: 0;
    font-weight: 700;
}

.contact-list dd a { font-weight: 700; }

.card {
    padding: clamp(1.25rem, 4vw, 2rem);
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.contact-form > div { margin-bottom: 1rem; }

.contact-form label {
    display: block;
    margin-bottom: .3rem;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid #8a8377;
    border-radius: 6px;
    background: var(--plaster);
    color: var(--ink);
    font: inherit;
}

.contact-form textarea { resize: vertical; min-height: 9rem; }

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 3px solid var(--dusk-600);
    outline-offset: 1px;
    background: #fff;
}

.contact-form ::placeholder { color: #6b655d; opacity: 1; }

.contact-form ul {
    margin: .3rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--red);
    font-weight: 700;
}

.form-hint {
    margin: .9rem 0 0;
    font-size: 1rem;
    color: var(--ink-soft);
}

.contact-sent {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--pine-100);
    border-left: 6px solid var(--pine);
    border-radius: 3px;
    color: var(--pine);
}

.contact-sent strong { display: block; }

@media (min-width: 62rem) {
    .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; }
}

/* ---------- footer: the plate of the logo again ---------- */

.foot {
    background: var(--plate);
    color: var(--stone);
    padding: clamp(2.5rem, 7vw, 4rem) 0 1.5rem;
}

.foot-grid {
    display: grid;
    gap: 2rem;
}

.foot-brand img {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 0 1rem -.5rem;
}

.foot-brand p { max-width: 24rem; color: #cbc6ba; }

.foot h2 {
    margin: 0 0 .7rem;
    font-size: 1.35rem;
    color: var(--amber);
}

.foot p { margin: 0 0 .5rem; }

.foot a { color: var(--stone); }
.foot a:hover { color: var(--amber); }

.foot address { font-style: normal; line-height: 1.7; }

.foot-phone {
    font: 700 1.7rem/1.1 var(--display);
    font-variant-numeric: lining-nums;
    text-decoration: none;
    white-space: nowrap;
}

.foot-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.9;
}

.foot-bottom {
    margin-top: 2.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid #4a4640;
    font-size: 1rem;
    color: #cbc6ba;
}

.foot-bottom p { margin: 0; }

@media (min-width: 40rem) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62rem) {
    .foot-grid { grid-template-columns: 1.5fr 1.1fr 1fr .8fr; gap: 3rem; }
}

/* ---------- 404 ---------- */

.not-found {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--plate);
    color: var(--stone);
    text-align: center;
}

.not-found > div { max-width: 34rem; }

.not-found img {
    width: 184px;
    height: auto;
    margin-bottom: 1rem;
}

.not-found h1 {
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    color: var(--amber);
}

.not-found h2 { margin-top: 2rem; font-size: 1.6rem; color: var(--amber); }
.not-found a { color: var(--stone); }
.not-found a:hover { color: var(--amber); }
.not-found .btn-light { color: var(--ink); }
.not-found .btn-light:hover { color: var(--ink); }
.not-found :focus-visible { outline-color: var(--amber); }

/* ---------- motion: the windows light up, one after another ---------- */

@media (prefers-reduced-motion: no-preference) {
    @keyframes light-up {
        from { filter: brightness(.22) saturate(.3) drop-shadow(0 0 0 rgb(255 196 96 / 0)) drop-shadow(0 10px 14px rgb(38 34 31 / .28)); }
        to { filter: brightness(1) saturate(1) drop-shadow(0 0 16px rgb(255 196 96 / .7)) drop-shadow(0 10px 14px rgb(38 34 31 / .28)); }
    }

    /* wide screens: the arcade is on the first screen, so it lights up when the page opens */
    @media (min-width: 62rem) {
        .arcade li { animation: light-up .9s ease-out both; animation-delay: calc(.5s + var(--i, 0) * .28s); }
    }

    /* phones: it lights up as it scrolls into view, where the browser can do that */
    @media (max-width: 61.99rem) {
        @supports (animation-timeline: view()) {
            .arcade li {
                animation: light-up linear both;
                animation-timeline: view();
                animation-range: entry calc(20% + var(--i, 0) * 22%) entry calc(110% + var(--i, 0) * 22%);
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* ---- lightbox: /js/lightbox.js opens a linked image enlarged over the page, in a <dialog> ----
   Paste this block into the site's css/site.css. The overlay is dark in every theme and brings its own
   colours and box sizing, so it does not depend on the rest of the stylesheet. To recolour it to the
   site, set these on .lightbox (or on :root): --lb-bg, --lb-text, --lb-accent (focus ring),
   --lb-accent-soft (hover). */

[data-lightbox] {
    cursor: zoom-in;
}

.lightbox,
.lightbox * {
    box-sizing: border-box;
}

html:has(.lightbox[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 68px 12px 14px;
    border: 0;
    background: var(--lb-bg, rgba(12, 14, 16, 0.95));
    color: var(--lb-text, #f2f2f2);
    color-scheme: dark;
    overscroll-behavior: contain;
}

.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}

.lightbox::backdrop {
    background: none;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.lightbox-stage img {
    display: block;
    max-width: none;
    border-radius: 4px;
    background: #fff;
}

.lightbox-caption {
    display: grid;
    place-items: center;
    min-height: 44px;
    max-width: none;
    margin: 0;
    padding: 0 56px;
    color: var(--lb-text, #f2f2f2);
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: center;
}

.lightbox-button {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox-button:hover {
    border-color: #ffffff;
    background-color: var(--lb-accent-soft, rgba(255, 255, 255, 0.16));
}

.lightbox-button:focus-visible {
    outline: 3px solid var(--lb-accent, #ffffff);
    outline-offset: 3px;
    border-radius: 50%;
}

.lightbox-button[hidden] {
    display: none;
}

.lightbox-close {
    top: 12px;
    right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.lightbox-prev,
.lightbox-next {
    bottom: 14px;
}

.lightbox-prev {
    left: 12px;
    rotate: 180deg;
}

.lightbox-next {
    right: 12px;
}

@media (min-width: 760px) {
    .lightbox {
        padding: 24px 84px 18px;
    }

    .lightbox-caption {
        padding: 0;
    }

    .lightbox-prev,
    .lightbox-next {
        top: calc(50% - 22px);
        bottom: auto;
    }

    .lightbox-prev {
        left: 20px;
    }

    .lightbox-next,
    .lightbox-close {
        right: 20px;
    }

    .lightbox-close {
        top: 20px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] {
        animation: lightbox-in 0.2s ease;
    }
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}