@import url('./rotulo.css');

:root {
    --bg: #f3f4f1;
    --card: #ffffff;
    --ink: #1d2327;
    --muted: #66706f;
    --line: #dde1dc;
    --accent: #2f5d62;
    --land: #eceee6;
    --water: #c9dde0;
    --road: #ffffff;
    --weight: 400;
    --size: 64px;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161a1b;
        --card: #1f2526;
        --ink: #e6ebe8;
        --muted: #93a09d;
        --line: #2f3739;
        --accent: #7fb7b5;
        --land: #20272a;
        --water: #1d3337;
        --road: #2c3437;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 'Rotulo', system-ui, sans-serif;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    display: grid;
    gap: 28px;
}

.top h1 {
    margin: 0;
    font-size: 72px;
    font-weight: 300;
    line-height: 1;
}

.top p {
    margin: 8px 0 12px;
    color: var(--muted);
}

nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

a {
    color: var(--accent);
}

h2 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.controls {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto;
    gap: 10px 14px;
    align-items: center;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.controls input[type='range'] {
    accent-color: var(--accent);
}

output {
    font-variant-numeric: tabular-nums;
}

.sample {
    font-size: var(--size);
    font-weight: var(--weight);
    line-height: 1.1;
    outline: none;
    overflow-wrap: anywhere;
}

.reading-forms .sample,
.reading-forms .glyphs {
    font-feature-settings: 'ss01';
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.grid > div,
.reading,
.map {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
}

.glyphs {
    margin: 0;
    font-size: 28px;
    font-weight: var(--weight);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.weights {
    display: grid;
    gap: 4px;
}

.weights p {
    margin: 0;
    font-size: 32px;
    display: flex;
    gap: 16px;
    align-items: baseline;
}

.weights span {
    font-size: 12px;
    color: var(--muted);
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
}

.reading p {
    margin: 0 0 8px;
    color: var(--muted);
}

.lectura {
    font-family: 'Rotulo Lectura', 'Rotulo', sans-serif;
    font-size: 20px;
    line-height: 1.7;
    color: var(--ink) !important;
    max-width: 65ch;
}

.map svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.land {
    fill: var(--land);
}

.water {
    fill: none;
    stroke: var(--water);
    stroke-width: 24;
}

.road {
    fill: none;
    stroke: var(--road);
    stroke-width: 10;
}

.map text {
    fill: var(--ink);
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--land);
    stroke-width: 4px;
    stroke-linejoin: round;
}

.city {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.town {
    font-size: 20px;
}

.street,
.river {
    font-size: 14px;
}

.coord {
    font-size: 11px;
}

@media (max-width: 640px) {
    .controls {
        grid-template-columns: auto 1fr;
    }

    .top h1 {
        font-size: 52px;
    }
}