@layer reset,base,layout,components,responsive;
@layer reset {
    * {
        box-sizing:border-box
    }
    body,h1,h2,h3,p,ul,ol,figure {
        margin:0
    }
    img,svg {
        max-width:100%
    }
    button,input,select,textarea {
        font:inherit
    }
    a,button,input,select,textarea,summary {
        touch-action:manipulation
    }
    button {
        cursor:pointer
    }
    table {
        border-collapse:collapse;
        width:100%
    }
}
@layer base {
    :root {
        color-scheme:dark;
        --bg:#161c1a;
        --panel:#242d28;
        --panel2:#303b32;
        --paper:#e8d9ba;
        --light-paper:#f2e7d2;
        --gold:#c7a46b;
        --bright:#e0c38c;
        --green:#405849;
        --burgundy:#633d48;
        --ink:#28231d;
        --light:#e9e4d8;
        --muted:#b5b7a8;
        --line:#485044
    }
    body {
        background:radial-gradient(ellipse at top,#2b362d 0,transparent 65%),var(--bg);
        color:var(--light);
        font:15px/1.6 'Segoe UI',Tahoma,Arial,sans-serif;
        min-width:320px
    }
    h1,h2,h3,.brand,.purse,.stat b {
        font-family:Georgia,'Times New Roman',serif;
        font-weight:400
    }
    h1 {
        font-size:clamp(30px,3vw,42px);
        line-height:1.2;
        letter-spacing:-.025em
    }
    h2 {
        font-size:24px;
        line-height:1.3
    }
    h3 {
        font-size:19px;
        line-height:1.4
    }
    p {
        margin:12px 0
    }
    small {
        font-size:12px
    }
    a {
        color:var(--bright);
        text-decoration:none
    }
    a:hover {
        text-decoration:underline;
        text-underline-offset:4px
    }
    button,.button {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:16px;
        background:linear-gradient(#dbbe87,#bfa06a);
        color:#25291f;
        border:1px solid #e0c38c;
        border-radius:3px;
        padding:10px 18px;
        font-size:13px;
        font-weight:650;
        line-height:1.35;
        text-decoration:none;
        box-shadow:0 2px 4px #0002
    }
    button:hover,.button:hover {
        background:#e6cc99;
        text-decoration:none
    }
    button:disabled {
        opacity:.45;
        cursor:not-allowed
    }
    button.secondary,.button.secondary {
        background:#ede1c9;
        color:#383c30;
        border-color:#a79c7f;
        box-shadow:none
    }
    button.danger {
        background:#633d48;
        color:#fff0e5;
        border-color:#855c61
    }
    .outline,.button.outline {
        background:#1b281d88;
        color:var(--bright);
        border-color:#b59b6a
    }
    .small {
        font-size:12px;
        padding:6px 12px
    }
    .text-button {
        border:0;
        background:none;
        color:var(--muted);
        padding:0;
        box-shadow:none;
        font-weight:400
    }
    .text-button:hover {
        background:none;
        color:var(--bright)
    }
    :focus-visible {
        outline:3px solid #d19844;
        outline-offset:4px;
        scroll-margin-block:30px
    }
    label {
        display:flex;
        flex-direction:column;
        gap:6px;
        font-size:13px;
        font-weight:600
    }
    label small {
        font-weight:400
    }
    input,select,textarea {
        background:#f8efdc;
        color:#28231d;
        border:1px solid #a69c83;
        border-radius:3px;
        padding:9px 10px;
        min-width:0;
        max-width:100%;
        font-size:14px
    }
    textarea {
        resize:vertical
    }
    input[type=number] {
        width:130px
    }
    input[type=checkbox] {
        accent-color:#52634a;
        width:18px;
        height:18px;
        flex-shrink:0
    }
    fieldset {
        border:1px solid #b8aa8b;
        padding:18px;
        min-width:0
    }
    legend {
        font-family:Georgia,serif;
        padding:0 8px;
        font-size:16px
    }
    fieldset:disabled {
        opacity:.55
    }
    fieldset label {
        margin-bottom:15px
    }
    blockquote {
        font:20px/1.6 Georgia,serif;
        border-left:3px solid #ad945f;
        margin:18px 0;
        padding:5px 22px
    }
    code {
        font:13px/1.6 Consolas,monospace;
        overflow-wrap:anywhere
    }
    progress {
        appearance:none;
        display:block;
        width:100%;
        height:6px;
        border:0;
        background:#202a23;
        border-radius:2px;
        overflow:hidden
    }
    progress::-webkit-progress-bar {
        background:#1c271f
    }
    progress::-webkit-progress-value {
        background:#7a9670
    }
    progress::-moz-progress-bar {
        background:#7a9670
    }
    progress.mana::-webkit-progress-value {
        background:#729da4
    }
    .muted {
        color:#686755
    }
    .dark .muted,.sidebar .muted {
        color:#b5b7a8
    }
    .eyebrow {
        display:block;
        color:#877044;
        font-size:10px;
        letter-spacing:.15em;
        font-weight:700;
        line-height:1.7
    }
    .dark .eyebrow,.scenic-banner .eyebrow,.home-hero .eyebrow {
        color:#ccb787
    }
    .gold {
        color:var(--bright)
    }
    .sr-only {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0
    }
    .skip {
        position:fixed;
        top:10px;
        left:10px;
        z-index:100;
        transform:translateY(-200%);
        padding:12px;
        background:var(--paper);
        color:var(--ink)
    }
    .skip:focus {
        transform:none
    }
    .lead {
        font-size:18px
    }
    .danger-text {
        color:#7b3343
    }
}
@layer layout {
    .masthead {
        border-bottom:1px solid #646141;
        background:#17211bd9
    }
    .header-inner {
        max-width:1540px;
        padding:23px 38px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:30px;
        margin:auto
    }
    .brand {
        display:flex;
        align-items:center;
        gap:14px;
        color:#e0c38c;
        font-size:31px;
        letter-spacing:.18em;
        line-height:1.1
    }
    .brand:hover {
        text-decoration:none
    }
    .brand small {
        display:block;
        letter-spacing:.24em;
        font:8px/2.6 'Segoe UI',sans-serif;
        color:#b4b39f
    }
    .world-clock {
        text-align:center;
        display:flex;
        flex-direction:column;
        gap:2px
    }
    .world-clock .eyebrow {
        font-size:9px;
        color:#9caa98
    }
    .world-clock strong {
        font:17px Georgia,serif;
        color:#dad9c7
    }
    .world-state {
        font-size:10px;
        color:#aeb5a5
    }
    .world-state:before {
        content:'●';
        color:#84a570;
        font-size:8px;
        margin-right:6px
    }
    .account-nav {
        display:flex;
        gap:20px;
        align-items:center;
        font-size:12px
    }
    .account-nav a {
        color:#c9cdbb
    }
    .main-nav {
        background:#202a23;
        border-bottom:1px solid #555743
    }
    .nav-inner {
        max-width:1540px;
        margin:auto;
        display:flex;
        gap:20px;
        padding:0 38px 0 286px
    }
    .main-nav a {
        color:#bdc4b4;
        padding:16px 12px 13px;
        border-bottom:3px solid transparent;
        letter-spacing:.04em;
        font-size:12px
    }
    .main-nav a[aria-current] {
        color:var(--bright);
        border-color:var(--gold);
        background:linear-gradient(transparent,#b49d5820)
    }
    .game-shell {
        display:grid;
        grid-template-columns:228px minmax(0,1fr);
        max-width:1540px;
        margin:auto;
        min-height:75vh;
        border-inline:1px solid #394236
    }
    .sidebar {
        padding:28px 20px;
        background:linear-gradient(#202b23,#19221c);
        border-right:1px solid #3e493b
    }
    .sidebar-person {
        text-align:center;
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:4px;
        padding-bottom:22px;
        border-bottom:1px solid #414b3b
    }
    .sidebar-person strong {
        font:20px Georgia,serif;
        color:#dddac6
    }
    .sidebar-person span,.sidebar-person a {
        font-size:11px
    }
    .sidebar-person .eyebrow {
        font-size:9px;
        color:#bdab7e;
        margin-top:10px
    }
    .portrait {
        width:72px;
        height:82px;
        border:1px solid #a58e60;
        outline:4px solid #181f19;
        display:grid;
        place-items:center;
        background:radial-gradient(circle at 50% 35%,#5b6e51,#2b3d2d 65%);
        font:42px Georgia,serif;
        color:#c2ba98;
        box-shadow:0 0 0 5px #49533c
    }
    .mini-resource {
        width:100%;
        padding-top:10px
    }
    .mini-resource label {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        font-size:10px;
        font-weight:400;
        margin-bottom:5px;
        color:#b8c0ae
    }
    .mini-resource label b {
        font-weight:400;
        color:#cfd5c4
    }
    .purse {
        color:#d6bb81;
        font-size:20px;
        padding-top:14px
    }
    .purse small {
        font:9px 'Segoe UI',sans-serif;
        display:block;
        color:#94a18d
    }
    .sidebar-label {
        font-size:9px;
        letter-spacing:.15em;
        color:#9fa88f;
        margin:24px 0 9px
    }
    .side-links {
        display:flex;
        flex-direction:column;
        gap:2px
    }
    .side-links a {
        font-size:12px;
        color:#c2c7b4;
        border-radius:2px;
        padding:6px 7px
    }
    .side-links a:before {
        content:'›';
        color:#96885d;
        margin-right:10px
    }
    .side-links a:hover {
        background:#34402f;
        text-decoration:none;
        color:#eed49b
    }
    .side-links .danger-link {
        color:#e4ac9d
    }
    .sidebar-note {
        font:italic 13px/1.8 Georgia,serif;
        color:#86957f;
        border-top:1px solid #3b4636;
        margin-top:30px;
        padding-top:20px;
        text-align:center
    }
    .game-shell main {
        min-width:0;
        padding:26px 32px 48px;
        background:linear-gradient(110deg,#1c261e70,#161c1a00)
    }
    .public-shell {
        max-width:1500px;
        margin:auto
    }
    .public-shell main {
        padding-bottom:50px
    }
    .content-columns {
        display:grid;
        grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);
        gap:22px
    }
    .two-column {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px
    }
    .two-column>.panel {
        margin-bottom:0
    }
    .two-column {
        margin-bottom:22px
    }
    .site-footer {
        max-width:1540px;
        margin:auto;
        padding:24px 30px;
        border-top:1px solid #3b4436;
        color:#8e9b87;
        font-size:10px;
        display:flex;
        gap:16px;
        justify-content:center
    }
    .site-footer>span {
        font-family:Georgia,serif;
        letter-spacing:.2em;
        color:#b29d70
    }
    .page-heading {
        margin-bottom:25px
    }
    .page-heading h1 {
        color:#e1dcc8;
        margin:6px 0 10px
    }
    .page-heading p {
        max-width:780px;
        color:#b3bba9;
        font-size:13px
    }
    .breadcrumb {
        font-size:8px;
        letter-spacing:.14em;
        color:#92a087;
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        margin-bottom:16px
    }
    .breadcrumb span {
        color:#9d8657
    }
    .breadcrumb a {
        color:#b1bba4
    }
    .scenic-banner {
        background:linear-gradient(0deg,#101c16aa,transparent 75%),url('/assets/avaren.svg') center 53%/cover;
        min-height:244px;
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        padding:26px 30px;
        border:1px solid #667052;
        box-shadow:0 3px 12px #0003;
        margin-bottom:26px;
        gap:25px
    }
    .scenic-banner h1 {
        font-size:44px;
        color:#f1e5c6;
        margin:5px 0 7px;
        text-shadow:0 2px 5px #0007
    }
    .scenic-banner p {
        font:15px/1.6 Georgia,serif;
        color:#e2dec5;
        margin:0;
        max-width:690px
    }
    .scenic-banner .button {
        flex-shrink:0;
        align-self:flex-end;
        font-size:11px
    }
    .section-heading {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
        margin-bottom:15px
    }
    .section-heading h2 {
        font-size:23px;
        color:#e3dfc9
    }
    .section-heading>a {
        font-size:11px
    }
    .section-heading .eyebrow {
        color:#92a187;
        font-size:8px
    }
    .stat-grid {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:13px;
        margin-bottom:24px
    }
    .stat {
        background:linear-gradient(120deg,#303c30,#263126);
        padding:18px 20px;
        border:1px solid #4c5841;
        min-width:0
    }
    .stat>span {
        font-size:8px;
        letter-spacing:.15em;
        color:#a2af95;
        font-weight:700
    }
    .stat b {
        display:block;
        font-size:25px;
        color:#e2dfca;
        line-height:1.5;
        margin:5px 0 1px
    }
    .stat b small {
        font:10px 'Segoe UI',sans-serif;
        color:#b5bea7
    }
    .stat>small {
        font-size:9px;
        color:#a8b49a;
        line-height:1.4;
        display:block
    }
    .stat progress {
        margin-top:12px
    }
    .stat b.small-text {
        font-size:16px
    }
    .panel {
        background:linear-gradient(120deg,#f0e4cb,#e4d4b2);
        color:var(--ink);
        border:1px solid #b2a27e;
        box-shadow:0 3px 8px #0002;
        padding:23px 25px;
        margin-bottom:22px;
        min-width:0;
        position:relative
    }
    .panel h2 {
        color:#3e4430;
        margin-bottom:14px
    }
    .panel h3 {
        color:#3c442e
    }
    .panel a {
        color:#4c5f3d
    }
    .panel p {
        font-size:13px;
        color:#555541
    }
    .panel small {
        display:block;
        color:#6d6b54
    }
    .panel.dark {
        background:linear-gradient(120deg,#303b2e,#222f24);
        border-color:#4e5a41;
        color:#d6dbc5
    }
    .panel.dark h2,.panel.dark h3 {
        color:#e2d8b8
    }
    .panel.dark p,.panel.dark small {
        color:#afbba1
    }
    .panel.dark a {
        color:#d6ba7b
    }
    .panel-heading {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        border-bottom:1px solid #b8ac8c;
        padding-bottom:13px;
        margin-bottom:16px
    }
    .panel-heading h2 {
        margin:0;
        font-size:22px
    }
    .panel-heading>a,.panel-heading>span {
        font-size:10px
    }
    .dark .panel-heading {
        border-color:#506043
    }
    .panel-foot {
        margin-top:22px;
        padding-top:16px;
        border-top:1px solid #b8ac8c;
        display:flex;
        align-items:center;
        gap:18px;
        flex-wrap:wrap
    }
    .panel-foot a {
        font-size:11px
    }
    .ornament {
        color:#948050
    }
    .action-grid {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }
    .action-grid>a {
        padding:15px 13px;
        border:1px solid #c5b794;
        background:#f4e9d066;
        text-decoration:none;
        display:grid;
        grid-template-columns:30px 1fr;
        column-gap:10px;
        align-items:center
    }
    .action-grid>a:hover {
        background:#f7efd9;
        border-color:#958665
    }
    .action-grid>a>span {
        grid-row:span 2;
        font:25px Georgia;
        color:#7a7952
    }
    .action-grid b {
        font:16px Georgia;
        color:#39442d
    }
    .action-grid small {
        font-size:10px;
        margin-top:5px
    }
    .action-grid form {
        grid-column:1/-1
    }
    .event-list {
        list-style:none
    }
    .event-list li {
        display:flex;
        gap:12px;
        padding:14px 0;
        border-bottom:1px solid #bcaf8e
    }
    .event-list li:last-child {
        border:0
    }
    .event-marker {
        color:#9d8453;
        font-size:15px;
        padding-top:1px;
        flex-shrink:0
    }
    .event-list strong {
        display:block;
        font:16px/1.4 Georgia;
        margin:5px 0;
        color:#40462f
    }
    .event-list .eyebrow {
        font-size:8px;
        letter-spacing:.05em
    }
    .event-list p {
        font-size:11px;
        margin:5px 0;
        line-height:1.65
    }
    .event-list small {
        font-size:9px
    }
    .dark .event-list li {
        border-color:#4b5840
    }
    .dark .event-list strong {
        color:#d7d7be
    }
    .people-list {
        list-style:none
    }
    .people-list li {
        display:flex;
        gap:10px;
        align-items:center;
        padding:12px 0;
        border-bottom:1px solid #4b5840
    }
    .people-list strong {
        font:14px Georgia,serif;
        display:block
    }
    .people-list small {
        font-size:9px;
        margin-top:4px
    }
    .people-list .badge {
        margin-left:auto
    }
    .person-token {
        width:33px;
        height:38px;
        background:#40513a;
        border:1px solid #7b8058;
        display:grid;
        place-items:center;
        color:#b8bb90;
        font-family:Georgia,serif;
        flex-shrink:0
    }
    .panel-link {
        display:block;
        font-size:11px;
        margin-top:17px
    }
    .notice {
        display:block;
        padding:17px 0;
        border-bottom:1px solid #bdb090
    }
    .notice:last-of-type {
        border-bottom:0
    }
    .notice h3 {
        margin:4px 0 7px
    }
    .notice>span {
        font-size:10px
    }
    .notice>span>b {
        float:right
    }
    .notice p {
        margin:6px 0
    }
    .dark .notice {
        border-color:#526047
    }
    .badge {
        display:inline-block!important;
        background:#60714a;
        color:var(--light);
        padding:2px 7px;
        font-size:9px;
        border:1px solid #819161;
        border-radius:2px;
        white-space:nowrap
    }
    .flash {
        background:#d9dec5;
        border:1px solid #a8b186;
        border-left:3px solid #7c915b;
        color:#334429;
        padding:15px 20px;
        font-size:13px;
        margin-bottom:22px
    }
    .flash a {
        color:#3b5734;
        text-decoration:underline
    }
    .flash.error {
        background:#eed7c8;
        border-color:#ba897b;
        border-left-color:#8d504e;
        color:#672f33
    }
    .flash.error a {
        color:#6d3036
    }
    .inline-form {
        display:inline-block
    }
    .stack {
        display:flex;
        flex-direction:column;
        gap:17px
    }
    .stack>button {
        align-self:flex-start
    }
    .compact {
        max-width:460px
    }
    .trade-form {
        display:flex;
        gap:6px;
        align-items:center
    }
    .trade-form input[type=number] {
        width:65px;
        padding:5px
    }
    .trade-form select {
        max-width:135px;
        padding:5px
    }
    .form-row {
        display:flex;
        gap:20px;
        flex-wrap:wrap;
        align-items:flex-end;
        margin:18px 0
    }
    .form-row label {
        margin-bottom:8px
    }
    .check {
        display:flex;
        flex-direction:row;
        gap:10px;
        align-items:flex-start;
        font-size:12px;
        font-weight:400
    }
    .checkbox-row {
        display:flex;
        gap:20px;
        flex-wrap:wrap
    }
    .table-wrap {
        overflow:auto;
        max-width:100%
    }
    th,td {
        text-align:left;
        vertical-align:middle;
        padding:13px 12px;
        border-bottom:1px solid #b8ac8d;
        font-size:12px
    }
    th:first-child,td:first-child {
        padding-left:0
    }
    thead th {
        font:700 9px 'Segoe UI',sans-serif;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:#706b51;
        white-space:nowrap;
        border-bottom:2px solid #aaa07d;
        padding-block:13px
    }
    tbody th {
        font-weight:600
    }
    td small,th small {
        font-weight:400;
        font-size:10px;
        max-width:200px
    }
    .dark td,.dark th {
        border-color:#526146
    }
    .details {
        margin:16px 0 23px
    }
    .details>div {
        display:flex;
        justify-content:space-between;
        gap:22px;
        border-bottom:1px solid #c0b292;
        padding:9px 0;
        font-size:12px
    }
    .details dt {
        color:#706c54
    }
    .details dd {
        margin:0;
        text-align:right;
        color:#353e2d
    }
    .dark .details>div {
        border-color:#4b5b40
    }
    .dark .details dt {
        color:#a9b69d
    }
    .dark .details dd {
        color:#e0dec4
    }
    .tabs {
        display:flex;
        gap:3px;
        overflow:auto;
        border-bottom:1px solid #667052;
        margin-bottom:24px;
        padding-bottom:0
    }
    .tabs a {
        font-size:12px;
        white-space:nowrap;
        padding:12px 15px;
        border:1px solid transparent;
        border-bottom:0;
        border-radius:3px 3px 0 0;
        color:#c8ceb8
    }
    .tabs a[aria-current] {
        background:var(--paper);
        border-color:#b2a27e;
        color:#35422c
    }
    .attribute-grid {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:16px;
        margin-block:25px
    }
    .attribute-grid>div {
        border:1px solid #b9aa86;
        background:#f4e9d0;
        padding:20px;
        text-align:center
    }
    .attribute-grid span {
        font:17px Georgia
    }
    .attribute-grid b {
        display:block;
        font:40px Georgia;
        margin:10px
    }
    .spell-grid,.people-grid,.kingdom-grid,.family-options {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px
    }
    .spell,.family-options article {
        padding:20px;
        border:1px solid #c0af88;
        background:#f6ebd355;
        display:flex;
        flex-direction:column;
        align-items:flex-start
    }
    .spell .inline-form {
        margin-top:16px
    }
    .spell h3 {
        margin-top:5px
    }
    .spell small {
        font-size:11px
    }
    .people-grid .notice {
        border:1px solid #bfae8b;
        padding:18px;
        background:#f6ead433
    }
    .building-list {
        list-style:none;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px
    }
    .building-list li {
        padding:10px 0
    }
    .building-list a {
        font-family:Georgia,serif;
        font-size:17px
    }
    .building-list small {
        font-size:10px
    }
    .route-link {
        display:block;
        padding:13px 0;
        border-bottom:1px solid #4a5a3f
    }
    .route-link strong {
        font:16px Georgia
    }
    .route-link small {
        font-size:10px;
        padding-top:5px
    }
    .route-link:last-of-type {
        margin-bottom:15px
    }
    .inventory-chip {
        display:inline-block;
        padding:5px 10px;
        border:1px solid #b1a17c;
        font-size:11px;
        margin:5px
    }
    .conversation-choices {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px
    }
    .conversation-choices button {
        text-align:left;
        justify-content:flex-start
    }
    .combatant {
        background:#d8c9a5;
        border:1px solid #b19c75;
        padding:20px
    }
    .combatant .eyebrow {
        font-size:12px
    }
    .combatant progress {
        margin-top:18px
    }
    .combat-actions {
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-block:20px
    }
    .combat-log {
        list-style:none
    }
    .combat-log li {
        padding:13px 0;
        border-bottom:1px solid #526146;
        font-size:13px
    }
    .combat-log b {
        color:#ceb67f;
        margin-right:10px
    }
    .quest {
        display:grid;
        grid-template-columns:45px 1fr auto;
        gap:20px;
        align-items:start
    }
    .quest-seal {
        font:30px Georgia;
        color:#8a7b50
    }
    .quest h2 {
        font-size:23px;
        margin:5px 0
    }
    .quest-reward {
        text-align:right;
        display:flex;
        flex-direction:column;
        gap:8px;
        padding-top:25px
    }
    .quest-reward b {
        font:21px Georgia;
        color:#73653d
    }
    .quest-reward a {
        font-size:11px
    }
    .filter-label {
        max-width:330px;
        margin-bottom:17px
    }
    .filter-grid {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:15px;
        margin-top:20px
    }
    .filter-grid input[type=number] {
        width:100%
    }
    summary {
        cursor:pointer;
        font-family:Georgia,serif;
        font-size:20px
    }
    .pagination {
        display:flex;
        gap:20px;
        justify-content:center;
        margin:22px 0 0;
        font-size:12px
    }
    .check-list {
        list-style:none
    }
    .check-list li {
        display:flex;
        justify-content:space-between;
        gap:10px;
        font-size:11px;
        padding:8px 0;
        border-bottom:1px solid #b5a982
    }
    .check-list strong {
        color:#4b6540
    }
    .check-list b {
        margin-left:auto
    }
    .map-panel {
        padding:0;
        background:#263c32;
        overflow:hidden
    }
    .world-map {
        display:block;
        max-height:600px;
        width:100%;
        background:radial-gradient(ellipse,#344b42,#1d332f)
    }
    .landmass {
        fill:#65704d;
        stroke:#abb183;
        stroke-width:2
    }
    .map-river {
        fill:none;
        stroke:#a4b7a1;
        stroke-width:10;
        opacity:.5
    }
    .map-label {
        fill:#c0ba92;
        font:28px Georgia;
        letter-spacing:8px
    }
    .map-water {
        fill:#8daca2;
        font:18px Georgia;
        letter-spacing:4px
    }
    .map-town {
        fill:#faf0d1;
        font:16px Georgia;
        text-shadow:0 2px 2px #000
    }
    .town-dot {
        fill:#e3c88d;
        stroke:#273c2b;
        stroke-width:2
    }
    .wild-dot {
        fill:#4b3438;
        stroke:#d2bd83;
        stroke-width:1.5
    }
    .map-caption {
        margin:0!important;
        padding:18px 25px;
        background:#e2d6b5
    }
    .region-links {
        display:flex;
        flex-wrap:wrap;
        gap:10px 18px;
        margin-bottom:22px;
        font-size:12px
    }
    .auth-card {
        max-width:510px;
        margin:70px auto 40px;
        padding:38px 40px
    }
    .auth-card h1 {
        font-size:32px;
        color:#35422e;
        margin-top:8px
    }
    .auth-card .stack {
        margin-top:25px
    }
    .auth-card .fine-print {
        font-size:11px
    }
    .home-hero {
        min-height:520px;
        background:linear-gradient(90deg,#17271bf5,#17271b94 55%,#17271b00),url('/assets/avaren.svg') center/cover;
        border-bottom:1px solid #7c7d55;
        display:flex;
        align-items:center;
        padding:60px 70px
    }
    .hero-copy {
        max-width:640px
    }
    .hero-copy h1 {
        font-size:clamp(32px,4vw,57px);
        color:#f1e4c2;
        line-height:1.15;
        margin:18px 0 22px
    }
    .hero-copy p {
        font:17px/1.85 Georgia;
        color:#d9dec5;
        max-width:560px
    }
    .hero-copy .actions {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:20px;
        margin:32px 0 24px
    }
    .hero-copy small {
        color:#aab79d;
        font-size:11px
    }
    .hero-copy .subtle {
        font-size:12px
    }
    .world-numbers {
        display:grid;
        grid-template-columns:repeat(4,1fr);
        background:#293529;
        border-bottom:1px solid #4d5b41;
        padding:28px 55px;
        margin-bottom:35px
    }
    .world-numbers>div {
        text-align:center;
        border-right:1px solid #4e5c43
    }
    .world-numbers>div:last-child {
        border:0
    }
    .world-numbers b {
        font:30px Georgia;
        color:#d9c48f
    }
    .world-numbers span {
        display:block;
        font-size:10px;
        color:#a7b39a;
        letter-spacing:.05em;
        margin-top:5px
    }
    .public-content {
        margin-inline:45px;
        grid-template-columns:1.3fr 1fr
    }
    .feature-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:22px;
        margin-top:30px
    }
    .feature-grid p {
        font-size:12px
    }
    body[data-theme=burgundy] {
        --bg:#21181c;
        --panel:#342930;
        --green:#633d48;
        background:#21181c
    }
    body[data-theme=parchment] {
        background:#c3b593
    }
    body[data-theme=parchment] .game-shell main {
        background:#ccc1a2
    }
    body[data-theme=parchment] .page-heading h1,body[data-theme=parchment] .page-heading p,body[data-theme=parchment] .section-heading h2 {
        color:#283825
    }
    body[data-theme=parchment] .tabs a {
        color:#36462e
    }
    body[data-theme=parchment] .site-footer {
        color:#283825
    }
}
@layer responsive {
    @media(min-width:1400px) {
        .game-shell main {
            padding:32px 40px
        }
        .scenic-banner {
            min-height:270px
        }
        .content-columns {
            gap:25px
        }
    }
    @media(max-width:1150px) {
        .header-inner {
            padding:18px 25px
        }
        .world-clock {
            display:none
        }
        .game-shell {
            grid-template-columns:195px minmax(0,1fr)
        }
        .sidebar {
            padding-inline:15px
        }
        .game-shell main {
            padding:22px
        }
        .nav-inner {
            padding-left:220px;
            gap:2px
        }
        .main-nav a {
            padding-inline:10px
        }
        .content-columns {
            grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);
            gap:16px
        }
        .panel {
            padding:20px
        }
        .scenic-banner {
            padding:22px;
            min-height:230px
        }
        .scenic-banner h1 {
            font-size:38px
        }
        .scenic-banner .button {
            display:none
        }
        .stat {
            padding:14px
        }
        .stat b {
            font-size:21px
        }
        .stat small {
            font-size:9px
        }
        .action-grid {
            grid-template-columns:1fr
        }
        .action-grid>a {
            padding:13px
        }
        .public-content {
            margin-inline:25px
        }
        .home-hero {
            padding:55px
        }
    }
    @media(max-width:900px) {
        .content-columns,.two-column {
            grid-template-columns:1fr
        }
        .content-columns>.two-column {
            gap:15px
        }
        .stat-grid {
            grid-template-columns:repeat(2,1fr)
        }
        .action-grid {
            grid-template-columns:1fr 1fr
        }
        .kingdom-grid {
            grid-template-columns:1fr
        }
        .public-content {
            grid-template-columns:1fr
        }
        .quest {
            grid-template-columns:30px 1fr
        }
        .quest-reward {
            grid-column:2;
            text-align:left;
            padding-top:0
        }
        .quest-reward a {
            margin-top:5px
        }
        .home-hero {
            min-height:480px
        }
        .brand {
            font-size:26px
        }
        .account-nav {
            gap:14px
        }
    }
    @media(max-width:700px) {
        body {
            font-size:14px
        }
        .header-inner {
            padding:15px 18px;
            gap:10px
        }
        .brand {
            font-size:22px;
            letter-spacing:.12em;
            gap:8px
        }
        .brand img {
            width:34px;
            height:42px
        }
        .brand small {
            font-size:6px
        }
        .account-nav {
            font-size:10px;
            gap:10px
        }
        .account-nav .button {
            padding:8px;
            font-size:10px
        }
        .main-nav .nav-inner {
            padding:0 8px;
            gap:0;
            overflow:auto
        }
        .main-nav a {
            font-size:11px;
            padding:13px 12px;
            white-space:nowrap
        }
        .game-shell {
            display:block;
            border:0
        }
        .sidebar {
            border-right:0;
            border-bottom:1px solid #4d5940;
            padding:15px 18px
        }
        .sidebar-person {
            display:grid;
            grid-template-columns:45px 1fr;
            gap:0 14px;
            text-align:left;
            padding:0;
            border:0;
            align-items:center
        }
        .sidebar-person .portrait {
            width:42px;
            height:48px;
            font-size:25px;
            grid-row:span 4;
            outline-width:1px
        }
        .sidebar-person>.eyebrow {
            margin:0;
            font-size:8px
        }
        .sidebar-person>strong {
            font-size:17px
        }
        .sidebar-person>span,.sidebar-person>a {
            font-size:10px
        }
        .sidebar-person .mini-resource,.sidebar-person .purse {
            display:none
        }
        .sidebar-label,.side-links,.sidebar-note {
            display:none
        }
        .game-shell main {
            padding:20px 15px 30px
        }
        .scenic-banner {
            min-height:205px;
            padding:20px;
            background-position:63% center
        }
        .scenic-banner h1 {
            font-size:35px
        }
        .scenic-banner p {
            font-size:13px
        }
        .breadcrumb {
            font-size:7px;
            gap:8px
        }
        .page-heading h1 {
            font-size:32px
        }
        .stat-grid {
            gap:10px
        }
        .stat {
            padding:14px
        }
        .panel {
            padding:20px 17px;
            margin-bottom:17px
        }
        .panel h2 {
            font-size:22px
        }
        .action-grid {
            gap:10px;
            grid-template-columns:1fr
        }
        .family-options,.spell-grid,.people-grid {
            grid-template-columns:1fr
        }
        .attribute-grid {
            grid-template-columns:1fr 1fr
        }
        .tabs a {
            padding:10px 13px
        }
        .filter-grid {
            grid-template-columns:1fr 1fr
        }
        .site-footer {
            display:block;
            text-align:center;
            line-height:2;
            padding-inline:20px
        }
        .site-footer span {
            display:block
        }
        .home-hero {
            padding:40px 24px;
            min-height:500px;
            background-position:60% center
        }
        .hero-copy h1 {
            font-size:37px
        }
        .hero-copy p {
            font-size:15px
        }
        .hero-copy .actions {
            display:flex;
            align-items:flex-start;
            flex-direction:column;
            gap:17px;
            margin-block:25px
        }
        .world-numbers {
            padding:23px 10px;
            gap:12px 0;
            margin-bottom:20px
        }
        .world-numbers b {
            font-size:24px
        }
        .world-numbers span {
            font-size:8px
        }
        .public-content {
            margin-inline:15px
        }
        .feature-grid {
            grid-template-columns:1fr
        }
        .auth-card {
            margin:30px 15px;
            padding:28px 25px
        }
        .building-list {
            grid-template-columns:1fr 1fr
        }
        .combat-actions button {
            flex:1 1 35%
        }
        .world-map {
            min-height:300px
        }
        .map-town {
            font-size:20px
        }
        .quest {
            gap:12px
        }
        .panel-heading {
            align-items:flex-start
        }
        .panel-heading h2 {
            font-size:21px
        }
        .header-inner .account-nav form {
            display:none
        }
    }
    @media(prefers-reduced-motion:no-preference) {
        a,button {
            transition:background .15s,border-color .15s
        }
    }
    @media print {
        body {
            background:white;
            color:black
        }
        .sidebar,.masthead,.main-nav,.site-footer,form {
            display:none!important
        }
        .game-shell {
            display:block
        }
        .panel {
            box-shadow:none;
            break-inside:avoid
        }
        .panel.dark {
            background:white;
            color:black
        }
        .page-heading h1 {
            color:black
        }
    }
}