:root {
    --ink: #263c32;
    --pine: #203f35;
    --muted: #68766a;
    --paper: #f6f4eb;
    --line: #d6d9c8;
    --serif: Georgia, "DejaVu Serif", serif;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font:
        15px/1.5 "Trebuchet MS",
        "DejaVu Sans",
        sans-serif;
}
header {
    background: var(--pine);
    border-bottom: 3px solid #b79b62;
    color: white;
}
.mast,
main,
footer {
    max-width: 1480px;
    margin: auto;
    padding-inline: clamp(20px, 4.4vw, 78px);
}
.mast {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 48px;
}
.brand {
    font: 600 26px var(--serif);
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f7f1da;
    text-decoration: none;
}
.mast nav {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    gap: 28px;
}
.mast nav a {
    color: #c9d4c7;
    font-size: 13px;
    text-decoration: none;
    align-content: center;
    border-bottom: 3px solid transparent;
    padding-top: 3px;
}
.mast nav .active {
    border-color: #e2c87f;
    color: #fff;
}
.mast form {
    margin-left: auto;
}
.exit {
    color: #e0e7d7;
    background: transparent;
    border: 1px solid #698073;
    font-size: 12px;
    padding: 7px 13px;
}
.intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 34px 0 23px;
}
.eyebrow,
.resource small,
.site small,
.entry small,
.caption,
.folio,
.sectiontitle span,
.counter,
.shield small,
footer {
    font-size: 11px;
    letter-spacing: 0.06em;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: bold;
    color: #657454;
    display: flex;
    align-items: center;
    gap: 9px;
}
.eyebrow i,
.caption i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #74895c;
    transform: rotate(45deg);
}
h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.14;
    margin: 0;
}
h1 {
    font-size: clamp(42px, 4vw, 65px);
    letter-spacing: -0.045em;
    margin: 6px 0 7px;
}
h2 {
    font-size: 27px;
    letter-spacing: -0.035em;
}
h3 {
    font-size: 20px;
    letter-spacing: -0.025em;
}
.sub,
.muted,
p,
.sectiontitle span {
    color: var(--muted);
}
.sub {
    font-size: 13px;
}
.sub b {
    margin: 0 7px;
    color: #9caa92;
}
.shield {
    padding: 8px 15px 8px 14px;
    border-left: 2px solid #95aa7d;
    background: #eaf0df;
}
.shield strong,
.shield small {
    display: block;
}
.shield strong {
    font-size: 13px;
}
.shield small {
    margin-top: 2px;
    color: #61725d;
}
.resources {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid #cbd1be;
    margin-bottom: 24px;
    background: #efefe3;
}
.resource {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 9px 17px;
    min-height: 75px;
}
.resource + .resource:before {
    content: "";
    position: absolute;
    left: 0;
    height: 44px;
    border-left: 1px solid #cfd4c3;
}
.resource img {
    width: 52px;
    height: 51px;
    object-fit: contain;
    background: #e2e6d5;
    border-radius: 50%;
}
.resource small,
.resource strong {
    display: block;
}
.resource small,
.site small {
    text-transform: uppercase;
    color: #64735f;
    font-weight: bold;
    letter-spacing: 0.115em;
}
.resource strong {
    font: 600 26px var(--serif);
    line-height: 1.2;
}
.resource em {
    margin-left: auto;
    font: 12px monospace;
    color: #53714b;
}
.columns {
    display: grid;
    grid-template-columns: minmax(0, 2.36fr) minmax(245px, 1fr);
    gap: 20px;
    align-items: start;
}
.panel,
.site {
    background: #fcfbf4;
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
}
.panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 22px 16px;
}
.panelhead h2 {
    margin-top: 4px;
}
.folio {
    font: italic 18px var(--serif);
    color: #85886e;
}
.scene {
    position: relative;
    background: #a9c1ac;
}
.scene svg {
    display: block;
    width: 100%;
    height: auto;
}
.scene a:hover ellipse {
    fill: #fbeb99;
    opacity: 0.9;
}
.compass {
    position: absolute;
    right: 3%;
    bottom: 3%;
    font: bold 10px var(--serif);
    text-align: center;
    color: #35594f;
}
.compass span {
    display: block;
    font-size: 38px;
    line-height: 1;
}
.caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: #f2f0e2;
    color: #5b6c54;
}
.caption i {
    margin-right: 5px;
}
.counter,
mark {
    border: 1px solid #d4dac6;
    color: #52704c;
    background: #eef1e3;
    padding: 3px 8px;
    border-radius: 4px;
}
.sidebody {
    padding: 0 22px 20px;
}
.job {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--line);
}
.job img,
.sitetop img,
.recruit img {
    width: 48px;
    height: 49px;
    object-fit: contain;
}
.job small {
    display: block;
    font-size: 11px;
    color: var(--muted);
}
button,
.linkbtn {
    font: 600 13px/1.3 inherit;
    font-family: inherit;
    font-weight: 600;
    border: 0;
    background: #315846;
    color: #fff;
    border-radius: 4px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: none;
}
.linkbtn {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
}
button:hover,
.linkbtn:hover {
    background: #496d51;
}
.textlink {
    display: inline-block;
    margin-top: 10px;
    color: var(--pine);
    font-size: 13px;
}
.sidebody h3 {
    margin-top: 5px;
}
.line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
}
.sectiontitle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 27px 0 12px;
}
.sites {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.site {
    padding: 10px 14px 14px;
}
.site:target {
    outline: 3px solid #baa268;
}
.sitetop {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sitetop small {
    font-size: 9px;
}
.sitetop h3 {
    font-size: 18px;
}
.sitetop mark {
    margin-left: auto;
    font: 11px monospace;
}
.site p {
    font-size: 12px;
}
.site button {
    font-size: 12px;
}
.gate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
}
.pad {
    padding: 24px;
}
.pad h2 {
    margin: 4px 0 18px;
}
.pad h3 {
    margin: 15px 0 5px;
}
label {
    display: block;
    margin: 12px 0;
    color: #526250;
    font-size: 13px;
    font-weight: 600;
}
input,
select {
    display: block;
    margin-top: 4px;
    width: 100%;
    padding: 9px;
    border: 1px solid #bfc8b7;
    border-radius: 3px;
    background: #fffef7;
    color: var(--ink);
    font: inherit;
}
.pair,
.inline,
.recruit {
    display: flex;
    gap: 12px;
    align-items: center;
}
.pair label {
    flex: 1;
}
.inline {
    align-items: end;
}
.inline label {
    max-width: 85px;
    margin: 0;
}
.inline button {
    margin: 0;
}
.recruit p,
.entry p {
    margin: 4px 0;
}
.recruit img {
    background: #eaeddc;
    border-radius: 6px;
    width: 63px;
    height: 68px;
}
.recruit small {
    color: var(--muted);
}
.inline {
    margin-top: 12px;
}
.mapgrid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    background: #d0d7b9;
    margin: 0 14px;
}
.tile {
    min-width: 0;
    height: clamp(36px, 4.6vw, 67px);
    position: relative;
    border: 1px solid #b8c4a5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.tile img {
    width: 65%;
    height: 78%;
    object-fit: contain;
}
.tile small {
    position: absolute;
    bottom: 1px;
    left: 3px;
    font: 9px monospace;
    color: #475c50;
}
.grass {
    background: #d6dbb8;
}
.forest {
    background: #b8caa4;
}
.water {
    background: #a9c8c4;
}
.ridge {
    background: #c9cfb7;
}
.settled {
    outline: 2px solid #aa844a;
    outline-offset: -2px;
    background: #e3d5ac;
}
.tile:hover {
    filter: brightness(1.09);
}
.entry {
    border-top: 1px solid var(--line);
    padding: 12px 0;
}
.manual {
    max-width: 900px;
}
.manual p {
    line-height: 1.65;
}
hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}
pre {
    overflow: auto;
}
.notice {
    padding: 12px 18px;
    background: #e0eed9;
    border-left: 3px solid #718c5c;
}
.error {
    background: #f6e5d9;
    border-color: #ac7253;
}
footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 36px;
    padding-block: 15px;
    color: #75816d;
}
a:focus-visible,
button:focus-visible {
    outline: 3px solid #c69640;
}
@media (max-width: 920px) {
    .mast {
        gap: 20px;
    }
    .mast nav {
        gap: 14px;
    }
    .sites {
        grid-template-columns: repeat(2, 1fr);
    }
    .resource {
        padding: 7px 10px;
    }
    .resource img {
        width: 37px;
    }
    .columns {
        grid-template-columns: minmax(0, 1.8fr) minmax(210px, 1fr);
    }
}
@media (max-width: 700px) {
    .mast {
        flex-wrap: wrap;
        padding-top: 10px;
        gap: 5px 15px;
    }
    .mast nav {
        order: 3;
        width: 100%;
        justify-content: space-between;
        min-height: 38px;
    }
    .mast nav a {
        font-size: 12px;
    }
    .brand {
        font-size: 22px;
    }
    .intro {
        margin: 20px 0 14px;
        flex-wrap: wrap;
    }
    .shield {
        padding: 3px 8px;
    }
    .resources {
        grid-template-columns: repeat(2, 1fr);
    }
    .resource {
        min-height: 54px;
    }
    .resource strong {
        font-size: 21px;
    }
    .columns,
    .gate {
        grid-template-columns: 1fr;
    }
    .sites {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sitetop {
        flex-wrap: wrap;
    }
    .site {
        padding: 8px;
    }
    .resource em {
        font-size: 11px;
    }
    .caption {
        font-size: 10px;
    }
    .tile {
        height: 40px;
    }
    .tile small {
        font-size: 7px;
    }
    .sub {
        font-size: 12px;
    }
    .intro h1 {
        font-size: 44px;
    }
}

.building-info { margin-top:.65rem; }
.building-info summary,.mappan a { cursor:pointer; color:#315844; font-weight:600; }
.mappan { display:flex; flex-wrap:wrap; gap:1rem; padding:0 1rem; }
.mapgrid:focus-visible { outline:3px solid #786133; }
[data-clock] { font-variant-numeric:tabular-nums; }
button:disabled { opacity:.55; cursor:default; }

.site-actions { display:flex; flex-wrap:wrap; gap:.55rem; align-items:baseline; }
.site-actions > .building-info { margin:0; }
.site-actions > .building-info[open] { flex-basis:100%; }
.building-info > summary { padding:.35rem .65rem; border:1px solid #a6b6a4; border-radius:.35rem; width:fit-content; }