/* =========================================================================
   Carceart — tokens and base
   ========================================================================= */

:root {
    /* Palette, sampled from the design */
    --c-ground: #171717;   /* page background */
    --c-land: #222222;     /* map landmass */
    --c-sea: #1f1f1f;      /* map water — Mapbox dark-v11's hsl(0, 0%, 12%) */
    --c-tile: #2f2f2f;     /* grid tile / plan plate */
    --c-ink: #ffffff;
    --c-mint: #9cc8bb;     /* survey data, listings, default filters */
    --c-yellow: #ffed94;   /* view switcher, derived filters */
    --c-grey: #d9d9d9;     /* clear button */
    --c-rule: rgba(255, 255, 255, 0.35);
    --c-veil: rgba(255, 255, 255, 0.1);

    /* Type — Roboto Medium is the design's single weight */
    --f-sans: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fs-lede: 2.25rem;    /* 36px — About / Team opening statement */
    --fs-nav: 1.5rem;      /* 24px */
    --fs-body: 1.25rem;    /* 20px */
    --fs-card: 1rem;       /* 16px */
    --fs-label: 0.8125rem; /* 13px — section eyebrows */

    /* 1440 grid: 156px margins, 1128px content, 4 × 264 + 3 × 24 */
    --page-margin: 156px;
    --content-max: 1128px;
    --gutter: 24px;
    --col: 264px;

    /* Chrome that hugs the viewport (header, footer, map overlays) sits this
       far from the edges at every size, independent of --page-margin. */
    --edge: 20px;

    --header-h: 104px;
    --radius-pill: 60px;
    --radius-card: 10px;
}

@media (max-width: 1100px) {
    :root {
        --page-margin: 48px;
        --header-h: 88px;
        --fs-lede: 1.75rem;
    }
}

@media (max-width: 640px) {
    :root {
        --page-margin: 20px;
        --header-h: 68px;
        --fs-lede: 1rem;
        --fs-nav: 1.75rem;
        --fs-body: 1rem;
    }
}

/* --- Fonts ------------------------------------------------------------- */

/* Roboto ships as a variable font, so one latin-subset file covers every
   weight the design uses (500 throughout, 700 for the footer heading). */
@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-variable.woff2") format("woff2-variations"),
         url("../fonts/Roboto-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* --- Base -------------------------------------------------------------- */

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

html {
    background: var(--c-ground);
}

body {
    margin: 0;
    background: var(--c-ground);
    color: var(--c-ink);
    font-family: var(--f-sans);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.25;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
}

ul,
menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--c-yellow);
    outline-offset: 3px;
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--page-margin);
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--c-ink);
    color: var(--c-ground);
}

.skip-link:focus {
    top: 0.5rem;
}

/* --- Page shell -------------------------------------------------------- */

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.page > main {
    flex: 1 0 auto;
}

.wrap {
    width: 100%;
    max-width: calc(var(--content-max) + var(--page-margin) * 2);
    margin-inline: auto;
    padding-inline: var(--page-margin);
}

/* --- Shared: section rule + eyebrow ------------------------------------ */

.section-label {
    margin: 0 0 0.5rem;
    font-size: var(--fs-label);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.section-rule {
    height: 1px;
    margin-bottom: 1.5rem;
    border: 0;
    background: var(--c-rule);
}

/* --- Shared: inline wordmark ------------------------------------------ */

/* The project name is set as the logo wherever it appears in running text.
   Sized in em so it tracks whatever type size it is dropped into. */
.wordmark {
    display: inline-block;
    width: 5.44em;
    height: 1.06em;
    vertical-align: -0.2em;
}

.wordmark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Shared: plan drawing --------------------------------------------- */

.planta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.planta img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A missing plan should read as "not yet drawn", never as a broken image. */
.planta-empty {
    display: block;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    opacity: 0.5;
}