/* The airship palette and the shared frame. Page sheets keep the content layouts. */
:root {
    --ar-paper: #f1eddf;
    --ar-ink: #272822;
    --ar-muted: #56584e;
    --ar-rule: #c9c2ad;
    --ar-brass: #dfc37e;
    --ar-brass-dark: #866234;
    --ar-wood: #2e251a;
    --ar-night: #1e1c17;
    --ar-cream: #fff3d7;
    --ar-display: 'Shippori Mincho', 'Yu Mincho', serif;
    --ar-ui: 'BIZ UDPGothic', 'Yu Gothic UI', Meiryo, sans-serif;
    --ar-navbar-h: 68px;
    --ar-link: #594018;
    --ar-chart-paper:
        repeating-linear-gradient(90deg, #5a493306 0 1px, transparent 1px 32px),
        repeating-linear-gradient(0deg, #5a493306 0 1px, transparent 1px 32px),
        var(--ar-paper);
    --ar-airship-photo: image-set(url('/images/bg-night-1280.webp') 1x, url('/images/bg-night-1672.webp') 2x);
    --ar-town-photo: image-set(url('/images/bg-town-1280.webp') 1x, url('/images/bg-town-1920.webp') 2x);
}

html { scroll-padding-top: calc(var(--ar-navbar-h) + 12px); }
body.ar-journal {
    background: var(--ar-chart-paper);
    color: var(--ar-ink);
    line-height: 1.65;
}
.ar-journal .container { max-width: none; padding-inline: clamp(16px, 2.4vw, 48px); }
.ar-journal ::selection { background: #e3c785; color: #2c2115; }
.ar-journal :focus-visible { outline: 2px solid #795322; outline-offset: 3px; }
.ar-journal :is(.ar-navbar, .ar-menu, .ar-footer, .ar-home-hero, .ar-home-connect, .ar-legal-hero) :focus-visible {
    outline-color: #ffdb91;
}
.ar-journal .ar-skip-link { background: var(--ar-brass); border-radius: 0; }

/* Stepped corners and two rivets echo the hardware on the airship. */
.ar-journal .ar-plate {
    --plate-metal: var(--ar-brass);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    max-width: 100%;
    padding: .58rem 1.42rem;
    color: #261c10;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}
.ar-journal .ar-plate::before, .ar-journal .ar-plate::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.ar-journal .ar-plate::before {
    z-index: -2;
    inset: 0;
    clip-path: polygon(
        0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
        6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
    background:
        linear-gradient(#f9e0a8 0 2px, transparent 2px calc(100% - 4px), #a27840 calc(100% - 4px)),
        repeating-linear-gradient(0deg, #ae78420e 0 1px, transparent 1px 4px),
        var(--plate-metal);
}
.ar-journal .ar-plate::after {
    z-index: -1;
    inset: 5px 8px 6px;
    border-block: 1px solid #8b613a80;
    background:
        radial-gradient(circle at 2px 50%, #7b542c 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 2px) 50%, #7b542c 0 1.5px, transparent 2px);
}
.ar-journal .ar-plate:hover { --plate-metal: #efd39a; color: #261c10; }
.ar-journal .ar-plate:active { --plate-metal: #cda763; }
.ar-journal .ar-plate:disabled { opacity: .55; }

.ar-journal .ar-navbar {
    height: var(--ar-navbar-h);
    padding: 0;
    background: var(--ar-night);
    border-bottom: 1px solid #ae8a52;
    box-shadow: inset 0 -3px #151410, inset 0 -4px #6b5435;
    backdrop-filter: none;
}
.ar-journal .ar-navbar-inner {
    height: 100%;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.5vw, 28px);
}
.ar-journal .ar-brand {
    flex: none;
    gap: 9px;
    margin: 0;
    padding-block: 5px;
    min-height: 44px;
    white-space: nowrap;
}
.ar-journal .ar-brand-icon { width: 36px; height: 36px; border: 1px solid #8d754b; border-radius: 2px; }
.ar-journal .ar-brand-text {
    color: var(--ar-cream);
    font: 700 clamp(1.07rem, 2.2vw, 1.48rem)/1.15 Georgia, serif;
}
.ar-journal .ar-nav-explore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.4vw, 28px);
    flex: 1 1 auto;
}
.ar-journal .ar-nav-explore a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 .18rem;
    color: var(--ar-cream);
    font-size: .875rem;
    white-space: nowrap;
    text-decoration: none;
}
.ar-journal .ar-nav-explore a:hover, .ar-journal .ar-nav-explore a[aria-current] {
    color: #ffe3ab;
    text-decoration: underline;
    text-underline-offset: .35em;
}
.ar-journal .ar-nav-join { flex: none; }
.ar-journal .ar-menu-toggle {
    flex: none;
    min-height: 44px;
    padding: .45rem .7rem;
    background: #332a1f;
    color: var(--ar-cream);
    border: 1px solid #8b7350;
    border-radius: 2px;
    font-size: .8rem;
}
.ar-journal .ar-menu-toggle:hover { background: #493b2b; }
.ar-journal .ar-menu-lines { width: 16px; gap: 5px; }
.ar-journal .ar-menu-lines i { background: var(--ar-brass); }
.ar-journal .ar-menu-lines i:last-child { width: 12px; }
.ar-journal .ar-menu-toggle[aria-expanded="true"] .ar-menu-lines i:first-child { transform: translateY(3px) rotate(45deg); }
.ar-journal .ar-menu-toggle[aria-expanded="true"] .ar-menu-lines i:last-child {
    width: 16px;
    transform: translateY(-3px) rotate(-45deg);
}
.ar-journal .ar-menu {
    --bs-offcanvas-width: min(26rem, 100vw);
    color: var(--ar-cream);
    background: var(--ar-night);
    border-left-color: #92754d !important;
}
.ar-journal .ar-menu .offcanvas-header {
    padding: .8rem clamp(16px, 4vw, 28px);
    border-bottom-color: #816540;
}
.ar-journal .ar-menu .offcanvas-title { color: var(--ar-cream); font: 600 1.25rem/1.45 var(--ar-display); }
.ar-journal .ar-menu .btn-close { flex: none; width: 28px; height: 28px; margin: 0; }
.ar-journal .ar-menu .offcanvas-body { padding: 1rem clamp(16px, 4vw, 28px) 1.5rem; }
.ar-journal .ar-menu-player { color: #dccba9; margin: .2rem 0 0; font-size: .82rem; }
.ar-journal .ar-menu-section { padding-bottom: 0; margin-bottom: 1.15rem; }
.ar-journal .ar-menu-label { color: #dccba9; margin-bottom: .15rem; font-size: .78rem; }
.ar-journal .ar-menu-section a {
    min-height: 44px;
    padding: .42rem .3rem;
    color: var(--ar-cream);
    border-color: #8b735054;
    transition: none;
}
.ar-journal .ar-menu-section a:hover, .ar-journal .ar-menu-logout:hover {
    color: #ffe3ab;
    text-decoration: underline;
    text-underline-offset: .24em;
}
.ar-journal .ar-menu-logout { display: inline-flex; align-items: center; min-height: 44px; color: var(--ar-cream); }
.ar-journal .ar-confirm { background: #2e251a; border-color: #94734b; border-radius: 3px; }
.ar-journal .ar-action-confirm {
    color: var(--ar-ink);
    background: #faf6ea;
    border-color: var(--ar-brass-dark);
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overflow-wrap: anywhere;
}
.ar-action-confirm h2 { font: 600 1.35rem/1.5 var(--ar-display); color: var(--ar-ink); }
.ar-journal .ar-action-confirm p { color: var(--ar-ink); }
.ar-action-confirm dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .4rem 1rem; }
.ar-action-confirm dd { margin: 0; }
.ar-journal .ar-action-confirm .btn { min-height: 44px; white-space: normal; }
.ar-journal .ar-action-confirm .ar-btn-outline { color: var(--ar-ink); border-color: var(--ar-brass-dark); background: transparent; }
.ar-journal .ar-action-confirm .ar-btn-outline:hover { background: #eee5d1; }
.ar-journal .ar-action-confirm .ar-btn-primary { color: var(--ar-ink); background: var(--ar-brass); border-color: var(--ar-brass-dark); box-shadow: none; transform: none; }

.ar-journal .ar-footer {
    color: var(--ar-cream);
    background: var(--ar-night);
    border-top: 3px solid #8c7546;
    padding-block: 1rem;
}
.ar-footer-bottom, .ar-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .1rem 1.35rem;
}
.ar-journal .ar-footer-wordmark { color: var(--ar-cream); font: 700 1.22rem/1.35 Georgia, serif; text-decoration: none; }
.ar-journal .ar-footer-sub, .ar-journal .ar-footer-copy { color: #e1d4b8; font-size: .77rem; opacity: 1; }
.ar-journal .ar-footer-links { display: flex; flex-wrap: wrap; gap: 0 1.15rem; }
.ar-journal .ar-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    color: var(--ar-cream);
    font-size: .81rem;
}
.ar-journal .ar-footer a:hover { color: #ffdda1; text-decoration: underline; }
.ar-footer-meta { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid #ac8d595e; }

/* Public reading pages use photographs in the masthead and opaque paper beneath. */
.ar-public .ar-reading-page { padding-block: 12px clamp(2.6rem, 5vw, 4.5rem); }
.ar-public .ar-breadcrumb { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; color: var(--ar-muted); font-size: .82rem; }
.ar-public .ar-breadcrumb a, .ar-public .ar-reading-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ar-link);
    text-decoration: underline;
    text-underline-offset: .22em;
}
.ar-public .ar-reading-mast {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 10rem;
    padding: 1.35rem clamp(16px, 4vw, 42px);
    border: 1px solid #786140;
    border-bottom: 4px solid #9e804c;
    background: linear-gradient(90deg, #101315fa, #101315e5 42%, #10131580 76%, #10131545), var(--ar-town-photo) center 43% / cover no-repeat, #171b1e;
    color: var(--ar-cream);
    box-shadow: inset 0 0 0 3px #1b171283;
}
.ar-public .ar-reading-mast h1, .ar-public .ar-legal-hero .ar-page-hero-title {
    font: 600 clamp(1.6rem, 3.8vw, 2.9rem)/1.35 var(--ar-display);
    margin: 0;
    color: var(--ar-cream);
    overflow-wrap: anywhere;
    text-shadow: 0 1px 6px #101315;
}
.ar-public .ar-legal-hero .ar-page-hero-title { animation: none; }
.ar-public .ar-reading-mast p { margin: .55rem 0 0; color: #fff0d5; }
.ar-public .ar-reading-mast--release { background-position: center, 67% 32%; }
.ar-public .ar-release-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--ar-rule); }
.ar-public .ar-release-row {
    display: grid;
    grid-template-columns: minmax(8rem, .26fr) minmax(0, 1fr);
    gap: .4rem 1.3rem;
    padding: .85rem .2rem;
    border-bottom: 1px solid var(--ar-rule);
}
.ar-public .ar-release-row__meta { display: flex; flex-wrap: wrap; align-content: start; gap: .25rem .6rem; padding-top: .3rem; color: var(--ar-muted); font-size: .83rem; }
.ar-public .ar-release-version { color: var(--ar-link); border-color: #9c80566b; background: #e6dbc2; border-radius: 2px; }
.ar-public .ar-release-row h2 { margin: 0; font-size: 1.05rem; line-height: 1.45; overflow-wrap: anywhere; }
.ar-public .ar-release-row h2 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ar-ink); text-underline-offset: .22em; }
.ar-public .ar-release-row h2 a:hover { color: var(--ar-link); }
.ar-public .ar-release-row p { margin: 0 0 .25rem; color: var(--ar-muted); overflow-wrap: anywhere; }
.ar-public .ar-release-empty { margin: 1.5rem 0 0; padding: 1rem; background: #faf6ea; border: 1px solid var(--ar-rule); }
.ar-public .ar-release-document {
    max-width: 52rem;
    margin: 1.7rem auto 0;
    padding: clamp(16px, 3.5vw, 38px);
    background: #faf6ea;
    border: 1px solid var(--ar-rule);
}
.ar-public .ar-markdown-content { color: var(--ar-ink); line-height: 1.85; overflow-wrap: anywhere; }
.ar-public .ar-markdown-content :is(h1, h2, h3, h4, strong) { color: var(--ar-ink); }
.ar-public .ar-markdown-content a { color: var(--ar-link); text-decoration: underline; }
.ar-public .ar-markdown-content :is(pre, blockquote, code) { color: var(--ar-ink); background: #eae1cd; border-color: #ba9f71; }
.ar-public .ar-markdown-content pre { max-width: 100%; overflow-x: auto; }
.ar-public .ar-markdown-content table { display: block; max-width: 100%; overflow-x: auto; }
.ar-public .ar-markdown-content :is(th, td) { border-color: var(--ar-rule); }
.ar-public .ar-markdown-content th { color: var(--ar-ink); background: #eae1cd; }
.ar-public .ar-markdown-content img { height: auto; }

.ar-journal .ar-legal-page { background: var(--ar-chart-paper); }
.ar-journal .ar-legal-hero {
    min-height: 0;
    padding-block: 0;
    border-bottom: 3px solid var(--ar-brass-dark);
    background: var(--ar-airship-photo) 69% 29% / cover no-repeat, #171b1e;
}
.ar-journal .ar-legal-hero > .container { display: flex; align-items: flex-start; min-height: clamp(10rem, 18vw, 15rem); padding-block: 1.5rem; }
.ar-journal .ar-legal-hero .ar-hero-overlay { background: linear-gradient(90deg, #101315ed, #101315ba 58%, #10131546); }
.ar-journal .ar-legal-content { padding-block: clamp(1.4rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.ar-journal .ar-legal-shell { background: #faf6ea; border: 1px solid var(--ar-rule); border-radius: 2px; }
.ar-journal .ar-legal-content .ar-legal-shell { padding: clamp(16px, 4vw, 42px); box-shadow: none; }
.ar-journal .ar-legal-shell .ar-terms-heading, .ar-journal .ar-legal-shell .ar-terms-subheading { color: var(--ar-ink); }
.ar-journal .ar-legal-shell .ar-terms-num { color: var(--ar-link); background: #e9dec4; border-color: #b8a37d; }
.ar-journal .ar-legal-shell :is(.ar-terms-intro, .ar-terms-list, .ar-terms-note, .ar-terms-footer, .ar-terms-section p, .ar-privacy-data-list dd) { color: var(--ar-ink); }
.ar-journal .ar-legal-shell .ar-terms-intro { background: #eee5d1; border-color: #b8a37d; margin-bottom: 2rem; }
.ar-journal .ar-legal-shell .ar-terms-section, .ar-journal #web-login-rules:target { scroll-margin-top: 0; }
.ar-journal .ar-legal-shell .ar-terms-note { background: #ede4ce; border-color: #b8a37d; }
.ar-journal .ar-legal-shell .ar-terms-section :is(a, .ar-terms-btn) { color: var(--ar-link); text-underline-offset: .23em; }
.ar-journal .ar-legal-shell .ar-terms-footer { border-color: var(--ar-rule); }
.ar-journal .ar-privacy-data-list > div { background: #f3ecda; border-color: var(--ar-rule); }
.ar-journal .ar-privacy-data-list dt { color: var(--ar-link); }

.ar-journal .ar-login-page { padding-block: clamp(1.2rem, 5vw, 3.5rem); background: var(--ar-night); }
.ar-journal .ar-login-page__backdrop {
    background: linear-gradient(90deg, #1a1b18b0, #1a1b1859 60%, #1a1b18a8), var(--ar-town-photo) center / cover no-repeat;
    filter: none;
}
.ar-journal .ar-login-card {
    padding: clamp(16px, 3.5vw, 34px);
    background: #faf6ea;
    color: var(--ar-ink);
    border: 1px solid #c3ad82;
    border-top: 4px solid var(--ar-brass-dark);
    border-radius: 2px;
    box-shadow: 0 12px 44px #15141050;
}
.ar-journal .ar-login-card h1 { color: var(--ar-ink); font: 600 clamp(1.4rem, 3vw, 2rem)/1.35 var(--ar-display); margin-bottom: .75rem; }
.ar-journal .ar-login-card details > summary { color: var(--ar-ink); min-height: 44px; padding-block: .5rem; font-size: 1rem; }
.ar-journal .ar-login-card :is(.ar-login-card__notice, .ar-login-ownership) {
    background: #eee5d1;
    border-color: #bdab87;
    color: var(--ar-ink);
}
.ar-journal .ar-login-card__notice strong { color: var(--ar-ink); }
.ar-journal .ar-login-card__notice span { color: var(--ar-muted); }
.ar-journal .ar-login-card :is(a, code) { color: var(--ar-link); }
.ar-journal .ar-login-card :is(.form-control, .form-select) { background: #fffcf4; color: var(--ar-ink); border-color: #978466; border-radius: 2px; }
.ar-journal .ar-login-card .form-control:focus { border-color: #876130; box-shadow: 0 0 0 2px #a57b3e40; }
.ar-journal .ar-login-card :is(.form-text, .ar-login-card__foot) { color: var(--ar-muted); border-color: var(--ar-rule); }

.ar-journal .ar-account-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}
.ar-journal .ar-account-links h2 { margin: 0 0 .25rem; font: 600 1rem/1.5 var(--ar-display); }
.ar-journal .ar-account-links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ar-rule); }
.ar-journal .ar-account-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: .35rem;
    border-bottom: 1px solid var(--ar-rule);
}

@media (max-width: 700px) {
    :root {
        --ar-navbar-h: 100px;
        --ar-airship-photo: image-set(url('/images/bg-night-640.webp') 1x, url('/images/bg-night-1280.webp') 2x);
        --ar-town-photo: image-set(url('/images/bg-town-640.webp') 1x, url('/images/bg-town-1280.webp') 2x);
    }
    .ar-journal .ar-navbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 50px 44px;
        gap: 0 8px;
        padding-block: 2px 4px;
    }
    .ar-journal .ar-brand { grid-column: 1; grid-row: 1; }
    .ar-journal .ar-brand-icon { width: 30px; height: 30px; }
    .ar-journal .ar-nav-join { grid-column: 2; grid-row: 1; justify-self: end; }
    .ar-journal .ar-nav-explore { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 0 .5rem; }
    .ar-journal .ar-navbar-inner:has(.ar-menu-toggle) .ar-nav-explore { grid-column: 1; }
    .ar-journal .ar-nav-explore a { font-size: .8rem; }
    .ar-journal .ar-menu-toggle { grid-column: 2; grid-row: 2; justify-self: end; gap: .35rem; padding-inline: .45rem; }
    .ar-public .ar-reading-mast { background-image: linear-gradient(90deg, #101315f2, #101315b5), var(--ar-town-photo); }
    .ar-public .ar-release-row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .ar-journal .ar-privacy-data-list > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

@media (max-width: 359px) {
    .ar-journal .ar-nav-explore { gap: .25rem; }
    .ar-journal .ar-nav-explore a, .ar-journal .ar-menu-toggle { font-size: .75rem; }
    .ar-journal .ar-menu-lines { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ar-journal *, .ar-journal *::before, .ar-journal *::after { animation: none !important; transition: none !important; }
    .ar-journal .ar-reveal-ready { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
    .ar-journal .ar-plate, .ar-journal .ar-motion-control { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
    .ar-journal .ar-plate::before, .ar-journal .ar-plate::after { display: none; }
}