/* Small shared details for the home page and press archive. */
a:focus-visible {
    outline: 2px solid #176d78;
    outline-offset: 4px;
}
::selection { background: #b8efeb; color: #111; }
.pixel-button {
    display: inline-block;
    box-sizing: border-box;
    min-height: 40px;
    padding: 3px 18px;
    border: 2px solid;
    border-color: #eee #666 #666 #eee;
    outline: 1px solid #333;
    background: #c6c6c6;
    color: #111;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #999;
    text-decoration: none;
    font-weight: normal;
}
.pixel-button:hover, .pixel-button:focus-visible {
    background: #dedede;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #999;
}
.pixel-button:focus-visible { outline: 2px solid #176d78; outline-offset: 3px; }
.pixel-button:active { border-color: #666 #eee #eee #666; }
.top-links a { position: relative; }
.top-links a::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border: 2px solid #584180;
    background: #191321;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
    z-index: 25;
}
.top-links a:hover::after, .top-links a:focus-visible::after { visibility: visible; }
.top-links a:focus-visible { outline: 2px solid #176d78; outline-offset: 2px; }
.link-preview {
    border-color: #584180;
    background: #191321;
    box-shadow: inset 0 0 0 1px #9980bf, 3px 3px #111;
}
.link-preview img { image-rendering: auto; }
.press-archive .press-image-link:focus-visible { outline: 3px solid #176d78; outline-offset: 3px; }
@media (hover: none) { .top-links a::after { display: none; } }

/* Inventory details stay small; the writing remains the focus. */
.top-links a:hover img, .top-links a:focus-visible img { transform: translateY(-2px); }
.top-links a:active img { transform: translateY(1px); }
.contact-note {
    position: relative;
    border-top: 0;
    padding: 18px 20px;
    background: #fafafa;
}
.contact-note::before, .contact-note::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border: solid #777;
}
.contact-note::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.contact-note::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.press-archive .press-image-link { flex-direction: column; justify-content: space-between; gap: 14px; text-decoration: none; }
.clipping-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    padding: 5px 8px;
    background: #ececec;
    border: 2px solid;
    border-color: #fff #999 #999 #fff;
    color: #333;
    font-size: 16px;
    line-height: 1.2;
    font-weight: normal;
}
.press-image-link:hover .clipping-action,
.press-image-link:focus-visible .clipping-action { background: #d4eee9; color: #134f54; }
@media (prefers-reduced-motion: reduce) {
    .top-links a:hover img, .top-links a:focus-visible img, .top-links a:active img { transform: none; }
}

/* A slightly stronger hierarchy using the original VT323 lettering. */
.home-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    margin-bottom: 26px;
}
.section-label {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}
main a { font-weight: 700; }
main .pixel-button, main .press-image-link { font-weight: 400; }
.link-preview { font-weight: 400; }
@media (max-width: 600px) {
    .home-title { font-size: 26px; }
    .section-label { font-size: 20px; }
}

/* Carry the same pixel typography through captions and controls. */
body { line-height: 1.7; }
main > .home-title + p { font-size: 1.1em; line-height: 1.55; }
main .pixel-button, .viewer-toolbar .pixel-button {
    font-family: "VT323", monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
}
.link-preview span {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: none;
}
.clipping-action { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.viewer-count {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.site-footer { font-size: 18px; line-height: 1.5; }
.site-footer time { font-variant-numeric: tabular-nums; }
.press-lang { opacity: 1; color: #666; font-size: .9em; }
@media (max-width: 600px) {
    body { line-height: 1.65; }
    main > .home-title + p { font-size: 20px; }
    .site-footer { font-size: 16px; }
}

/* Selective emphasis rather than making whole paragraphs heavy. */
main strong { font-weight: 700; }
main > p, .minecraft-list > li, .contact-note p { text-wrap: pretty; }
.home-title, .section-label { text-wrap: balance; }
.minecraft-list > li { margin-bottom: .8em; }
.minecraft-list a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.link-preview span { font-size: 17px; line-height: 1.3; }
.press-source { line-height: 1.5; }
.press-source .press-lang { display: block; margin-top: 4px; }
.viewer-original { font-size: 18px; font-weight: 700; }
.contact-note p { line-height: 1.65; }

/* Homepage portrait keeps the original photo proportions on every screen. */
.home-portrait {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 0 1.4em;
    image-rendering: auto;
}