@font-face {
    font-family: "Skiprat Flags";
    src: url("../fonts/flags.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ink: #11384f;
    --navy: #102e46;
    --blue: #15618a;
    --pale: #e9f3fa;
    --edge: #b6cfdf;
    --paper: #f8fcff;
    --radius: 8px;
    font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
    color: var(--ink);
    background: #b3cce8;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
    margin: 0;
    min-width: 280px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1.65;
}
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
a { color: #145b83; text-underline-offset: .2em; }
a:hover { color: #08364e; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2 { margin: 0; }
h1, h2 { line-height: 1.22; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 3.4vw, 2.65rem); font-weight: 650; letter-spacing: -.025em; }
h2 { font-size: 1.2rem; font-weight: 650; }
:focus-visible { outline: 3px solid #0058b0; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link {
    position: absolute;
    top: .5rem;
    left: 1rem;
    z-index: 5;
    padding: .65rem 1rem;
    color: white;
    background: var(--navy);
    transform: translateY(-180%);
}
.skip-link:focus { transform: none; color: white; }
.site-header { border-bottom: 1px solid #ffffff80; }
.header-inner {
    width: min(1100px, calc(100% - 3rem));
    margin-inline: auto;
    padding-block: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.brand { display: block; flex: 0 0 288px; }
.brand img { width: 100%; }
.main-navigation {
    background: linear-gradient(#284b65 0%, #15354e 48%, #0d293e 49%, #173e59 100%);
    border-top: 1px solid #7893a9;
    border-bottom: 1px solid #061f34;
    border-radius: 5px;
    box-shadow: 0 4px 12px #18364b26;
}
.navigation-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: .2rem;
    gap: .15rem;
}
.navigation-inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .4rem .7rem;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #f0f8ff;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
}
.navigation-inner a:hover {
    background: #ffffff13;
    border-color: #8cabb8;
}
.navigation-inner a[aria-current] {
    color: #092d48;
    background: linear-gradient(#f4fbff, #b8d5eb);
    border-color: #d3ebfc;
    box-shadow: 0 2px 4px #00172a33;
}
.navigation-inner a:focus-visible { outline-color: #fff; }
.site-main {
    width: min(1100px, calc(100% - 3rem));
    margin: 2.6rem auto 3rem;
    flex: 1;
}
.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.welcome-panel, .links-panel, .message-panel {
    background: #f8fcfff2;
    border: 1px solid #ffffff;
    border-radius: var(--radius);
    box-shadow: 0 5px 18px #18364b16;
    padding: clamp(1.4rem, 3vw, 2.3rem);
}
.welcome-panel h1 { margin-bottom: 1rem; }
.welcome-copy { max-width: 72ch; line-height: 1.6; }
.welcome-copy p + p { margin-top: .75rem; }
.welcome-copy a { font-weight: 600; }
.signature { margin-top: 1rem; line-height: 1.3; }
.signature strong { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 1.6rem; font-weight: 600; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 44px;
    padding: .55rem 1rem;
    border: 1px solid #1b4e6b;
    border-radius: 5px;
    background: linear-gradient(#2c6081, #183f5d);
    box-shadow: 0 2px 3px #102e4614;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.35;
}
.button:hover { color: #fff; background: #113b59; }
.button-secondary { background: linear-gradient(#fff, #e3eff8); color: var(--ink); border-color: #a1bdd0; }
.button-secondary:hover { color: #08293f; background: #d7e9f6; border-color: #4f83a3; }
.button-disabled, .button:disabled { background: #dce7ee; color: #526a7a; border-color: #b9cbd6; box-shadow: none; cursor: default; }
.archive-date { margin-top: 1rem; font-size: .78rem; color: #526e80; }
.section-bar, .card-heading {
    background: linear-gradient(#2a5674, #13374f);
    color: #fff;
}
.section-bar { padding: .85rem 1rem; font-size: 1.05rem; border: 1px solid #294e69; border-radius: 5px; text-align: center; }
.featured-pen { margin-top: 1.4rem; background: #f8fcff; border: 1px solid #e5f2fb; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 14px #18364b1a; }
.featured-pen a { display: block; overflow: hidden; }
.featured-pen img { width: 100%; aspect-ratio: 283 / 160; object-fit: cover; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.featured-pen a:hover img { transform: scale(1.025); }
.featured-pen figcaption { border-top: 1px solid var(--edge); padding: .75rem 1rem; font-weight: 600; text-align: center; }
.featured-action { display: flex; margin-top: 1.4rem; }
.text-link { font-weight: 600; text-decoration-thickness: 1px; }
.page-heading { max-width: 730px; margin-bottom: 1.6rem; }
.page-heading p { margin-top: .7rem; font-size: 1.05rem; }
.gallery-search { margin-top: 1.15rem; }
.gallery-search label { display: block; margin-bottom: .35rem; font-weight: 600; }
.gallery-search-controls { display: flex; align-items: stretch; gap: .5rem; max-width: 34rem; }
.gallery-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: .55rem .75rem;
    border: 1px solid var(--edge);
    border-radius: 5px;
    background: var(--paper);
    color: var(--ink);
}
.gallery-search .button { flex: 0 0 auto; margin: 0; }
.search-help { margin-top: .35rem; font-size: .85rem; }
.search-status { margin-top: .75rem; font-size: .9rem; }
.search-empty { max-width: 730px; margin-inline: auto; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-block: 1.6rem; }
.page-number, .page-boundary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.page-number:hover { color: var(--ink); background: #ffffff12; }
.page-boundary[aria-disabled="true"] { color: #7d8990; }
.pagination-bottom { gap: .6rem; margin-block: 2rem 1.6rem; }
.page-links { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.page-number { font-variant-numeric: tabular-nums; }
.page-number[aria-current="page"] { color: #102e46; background: #d6b26a; }
.page-ellipsis { min-width: 1.4rem; text-align: center; color: #7890a0; }
.page-boundary { gap: .35rem; padding-inline: .5rem; border-radius: 4px; font-size: .9rem; }
.page-boundary:hover { color: var(--ink); background: #ffffff12; }
.page-boundary[aria-disabled="true"] { cursor: default; }
select { min-height: 44px; padding: .4rem .6rem; border: 1px solid #a1bdd0; border-radius: 5px; background: var(--paper); color: var(--ink); }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.pen-card {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    overflow: hidden;
    background: var(--paper);
    border: 1px solid #e8f4fc;
    border-radius: 6px;
    box-shadow: 0 4px 12px #18364b1c;
}
.pen-photo { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #0c293f; }
.pen-photo > img { flex: 1 1 0; width: 100%; height: auto; min-height: 140px; object-fit: cover; }
.pen-photo:focus-visible { outline-offset: -4px; z-index: 1; }
.photo-action {
    padding: .4rem .6rem;
    color: white;
    background: #0c293fe8;
    font-size: .75rem;
    display: flex;
    justify-content: space-between;
}
.pen-photo:hover .photo-action { background: #14547a; }
.pen-details { min-width: 0; padding-bottom: .8rem; }
.card-heading { display: flex; align-items: center; gap: .6rem; padding: .35rem .7rem; }
.card-heading h2 { font-size: 1rem; flex: 1; overflow-wrap: anywhere; }
.country-flag {
    flex: 0 0 auto;
    font-family: "Skiprat Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}
.pen-details p { padding: .85rem .9rem .4rem; font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.pen-details .text-link { display: inline-block; margin: .3rem .9rem; font-size: .85rem; }
.collection-grid + .pagination { margin-top: 2rem; }
.links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.archive-note { color: #456278; font-size: .9rem; padding-bottom: .7rem; }
.resource-link { padding-block: 1.7rem; border-bottom: 1px solid var(--edge); }
.resource-link h2 { margin-bottom: .7rem; font-size: 1.15rem; }
.resource-link h2 a { display: flex; justify-content: space-between; gap: 1rem; text-decoration: none; }
.resource-link h2 a:hover { text-decoration: underline; }
.resource-link p { font-size: .95rem; }
.message-panel { max-width: 730px; margin-inline: auto; }
.message-panel p { margin-block: 1rem 1.5rem; }
.site-footer {
    width: min(1100px, calc(100% - 3rem));
    margin: auto auto 0;
    padding: 1.4rem 0 1.7rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #698eaa;
    font-size: .85rem;
}
.site-footer > a:first-child { font-weight: 700; text-decoration: none; }
.photo-viewer {
    width: min(860px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    background: transparent;
    color: #f4f1ec;
    overflow: auto;
}
.photo-viewer::backdrop { background: #08080bf5; backdrop-filter: blur(3px); }
body:has(.photo-viewer[open]) { overflow: hidden; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; }
.viewer-toolbar p { color: #b9b6b0; font-size: .75rem; }
.viewer-control {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #111114e6;
    color: #f4f1ec;
}
.viewer-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.viewer-control:hover:not(:disabled) { background: #303034; }
.viewer-control:disabled { color: #77747a; cursor: default; }
.viewer-control:focus-visible { outline-color: #e5c380; outline-offset: -3px; }
.viewer-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .75rem; align-items: center; }
.viewer-image-wrap { min-width: 0; min-height: 140px; display: grid; place-items: center; }
.viewer-image {
    max-height: max(140px, calc(100dvh - 15rem));
    max-width: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 54px #00000099;
}
.viewer-status { padding: 2rem; text-align: center; }
.viewer-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding: .75rem 3.5rem 0; overflow-wrap: anywhere; }
.viewer-caption h2 { font-size: 1.15rem; }
.viewer-caption p { margin-top: .25rem; color: #b9b6b0; font-size: .85rem; }

@media (max-width: 850px) {
    .header-inner { flex-direction: column; gap: .5rem; padding-block: .5rem .75rem; }
    .brand { flex: none; width: 288px; }
    .main-navigation { width: 100%; }
    .navigation-inner a { flex: 1 1 auto; }
    .site-main { margin-top: 2rem; }
    .home-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; }
    .pen-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .pen-photo > img { flex: none; min-height: 0; aspect-ratio: 2 / 1; }
    .pen-details p { font-size: .95rem; }
}

@media (max-width: 600px) {
    body { background-attachment: scroll; }
    .header-inner { width: calc(100% - 1.5rem); gap: .25rem; }
    .brand { width: 216px; }
    .navigation-inner a { flex: 1 0 40%; padding: .35rem .4rem; font-size: .85rem; }
    .site-main { width: calc(100% - 1.5rem); margin-block: 1.4rem 2rem; }
    .home-layout {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .welcome-panel { padding: 1.5rem; }
    .welcome-panel h1 { font-size: 2rem; }
    .featured-pens { max-width: 420px; width: 100%; margin-inline: auto; }
    .page-heading { padding-inline: .3rem; }
    .page-heading p { font-size: 1rem; }
    .pagination { gap: .35rem; flex-wrap: wrap; }
    .pagination-bottom { gap: .25rem; }
    .page-number { min-width: 44px; min-height: 44px; }
    .page-links { gap: .05rem; }
    .page-ellipsis { min-width: 1rem; }
    .page-boundary { display: none; }
    .collection-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    .card-heading h2 { font-size: 1rem; }
    .pen-details p { font-size: .9rem; padding: .7rem; }
    .pen-details .text-link { margin-inline: .7rem; }
    .links-grid { grid-template-columns: 1fr; }
    .links-panel { padding: 1.4rem; }
    .site-footer { width: calc(100% - 2rem); flex-wrap: wrap; font-size: .8rem; }
    .site-footer p { display: none; }
    .viewer-stage { gap: 0; }
    .viewer-image-wrap { grid-column: 1 / -1; grid-row: 1; }
    .viewer-previous, .viewer-next { grid-row: 1; z-index: 1; }
    .viewer-previous { grid-column: 1; }
    .viewer-next { grid-column: 3; }
    .viewer-caption { grid-template-columns: 1fr; gap: .25rem; padding-inline: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}