:root {
    --bg: #ECEBE6;
    --surf: #F8F8F4;
    --text: #1A1C20;
    --accent: #C25A3A;
    --link: #2440D0;
    --muted: #6D717A;
    --border: #D9D8CF;
    --font: 'Newsreader', Georgia, serif;
    --mono: 'Space Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    --header-h: 132px;
}

[data-theme="dark"] {
    --bg: #15171B;
    --surf: #1C1F26;
    --text: #E8E8E3;
    --accent: #E58A63;
    --link: #8FA8FF;
    --muted: #9AA0AA;
    --border: #2C313A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: background 0.2s, color 0.2s;
}

/* ─── Header ─── */

header {
    padding: clamp(20px, 4vw, 32px) 1.5rem 0;
    display: block;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 680px;
    margin: 0 auto;
}

.logo {
    font-family: var(--font);
    font-size: clamp(26px, 6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    display: block;
}

.tagline {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    line-height: 1;
}

.lang-switch {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.3rem 0.55rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.lang-switch:hover {
    color: var(--text);
    border-color: var(--muted);
}

nav {
    display: flex;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    max-width: 680px;
    margin: 1.1rem auto 0;
    padding-bottom: 1.1rem;
    border-bottom: 3px double var(--border);
}

nav a {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

nav a:hover {
    color: var(--text);
}

nav a.active {
    color: var(--text);
    border-color: var(--accent);
}

/* ─── Layout ─── */

.container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

main > .container {
    padding-top: 3.5rem;
    padding-bottom: 1rem;
}

main {
    flex: 1;
}

/* ─── About ─── */

#about {
    margin-bottom: 3rem;
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

#about h2 {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.about-text > p {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    max-width: 540px;
}

.cat-block {
    margin: 1.5rem 0;
}

.cat-block img {
    width: 100%;
    max-width: 360px;
    border-radius: 6px;
    display: block;
    margin-bottom: 0.5rem;
}

.cat-caption {
    font-size: 0.9rem !important;
    color: var(--muted);
    margin-bottom: 0 !important;
}

.bio-content {
    max-width: 560px;
    margin: 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.bio-content p {
    font-size: 1rem;
    line-height: 1.7;
}

.bio-content a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.15s, color 0.15s;
}

.bio-content a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0;
    margin: 0.25rem 0 0.5rem;
}

.tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.tl-city {
    font-size: 0.88rem;
    font-weight: 500;
}

.tl-year {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.03em;
}

.tl-current .tl-city {
    color: var(--accent);
}

.tl-arrow {
    color: var(--muted);
    font-size: 1rem;
    padding: 0 0.35rem;
    margin-bottom: 1rem;
}

.wishlist-note {
    font-size: 0.9rem !important;
    color: var(--muted);
    margin-top: 1.5rem !important;
    max-width: 520px;
}

.wishlist-note a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.15s, color 0.15s;
}

.wishlist-note a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Longread sections ─── */

.longread-section {
    scroll-margin-top: var(--header-h);
}

.section-banner {
    background-color: #1E1C19;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    height: 420px;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.section-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

.section-banner .container {
    position: relative;
    z-index: 1;
    padding-bottom: 2.5rem;
}

.banner-text h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.banner-text p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.section-content {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.section-content > h2 {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

/* ─── Games ─── */

.games-group {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.games-group-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.game-item {
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
}

.game-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.game-year {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 400;
}

.game-desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
}

.group-photo {
    width: 100%;
    max-width: 360px;
    border-radius: 6px;
    display: block;
}

.photo-credit {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--muted);
    margin-top: 0.3rem;
}

.games-devices-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}

/* ─── Section intro ─── */

.section-intro {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.section-intro p {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
}

.section-wishlist {
    font-size: 0.9rem !important;
    color: var(--muted);
}

.section-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.15s;
}

.section-link:hover {
    opacity: 0.7;
}

/* ─── Items ─── */

.items-list {
    display: flex;
    flex-direction: column;
}

.item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.item:first-child { padding-top: 0; }
.item:last-child  { border-bottom: none; padding-bottom: 0; }

.item-name {
    font-size: 0.95rem;
    font-weight: 500;
}

.item-name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.15s;
}

.item-name a:hover {
    border-color: var(--accent);
}

.item-desc {
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

.item-status {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.status-want { background: #FEF0E5; color: #9A4520; }
.status-have { background: #EDFAF3; color: #1A6640; }
.status-done { background: #EEF2FF; color: #3730A3; }
.status-wip  { background: #FFFBEA; color: #92610A; }
.status-v5   { background: #dcfce7; color: #14532d; }
.status-v4   { background: #ffedd5; color: #9a3412; }
.status-v3   { background: #fef9c3; color: #854d0e; }
.status-v2   { background: #dbeafe; color: #1d4ed8; }
.status-v1   { background: #f0f0f0; color: #555; }

.item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

.item-pic {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.item-pic:hover {
    color: var(--text);
    border-color: var(--muted);
}

.item-with-img {
    align-items: center;
}

.item-thumb-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.item-thumb-wrap .photo-credit {
    margin-top: 0;
    text-align: center;
    max-width: 72px;
}

.item-thumb {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 4px;
    background: #f5f5f5;
    flex-shrink: 0;
    cursor: zoom-in;
}

.item-body {
    flex: 1;
    min-width: 0;
}

.item-links {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.item-link {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.item-link:hover {
    color: var(--text);
    border-color: var(--muted);
}

.sort-controls {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.sort-btn {
    font-family: var(--mono);
    font-size: 0.72rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
}

.sort-btn:hover { color: var(--text); border-color: var(--muted); }
.sort-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.sort-dir {
    font-family: var(--mono);
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}

.sort-dir:hover { color: var(--text); border-color: var(--muted); }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.legend-filter {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.legend-filter.dimmed {
    opacity: 0.3;
}

.link-favicon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
    opacity: 0.7;
}

#img-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
}

#img-modal.open {
    display: flex;
}

.modal-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    cursor: zoom-out;
}

#img-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    pointer-events: none;
}

.empty {
    font-size: 0.9rem;
    color: var(--muted);
    font-style: italic;
}

/* ─── Markdown content ─── */

.md-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    padding-top: 0.9rem;
    margin-top: 0.1rem;
    border-top: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.md-content h3:first-child {
    padding-top: 0;
    border-top: none;
}

.md-content h4 {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-top: 0.9rem;
    margin-bottom: 0.4rem;
}

.md-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.md-content li {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.55;
    padding-left: 0.9rem;
    position: relative;
}

.md-content li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--border);
}

.md-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0 0;
}

.md-content strong {
    font-weight: 600;
    color: var(--text);
}

.md-content p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 0.6rem;
}

.md-content a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.15s, color 0.15s;
}

.md-content a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Feed (notes & articles) ─── */

.feed-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2.25rem 0 0.25rem;
}

.feed-heading .feed-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
    white-space: nowrap;
}

.feed-heading .feed-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.feed-heading .feed-more {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--link);
    text-decoration: none;
}

.note-item {
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--border);
}

.note-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.note-meta .note-tags {
    color: var(--accent);
}

.note-text {
    margin-top: 0.5rem;
    font-size: 1.05rem;
    line-height: 1.55;
}

.note-text img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 0.75rem 0;
}

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
}

.tag-chip {
    font-family: var(--mono);
    font-size: 0.68rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
}

.tag-chip.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.article-card {
    padding: 1.1rem 0;
    border-top: 1px solid var(--border);
}

.article-card:first-child {
    border-top: none;
}

.article-meta {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    display: flex;
    gap: 0.6rem;
}

.article-meta .article-tag {
    color: var(--accent);
}

.article-card h3 {
    margin: 0.4rem 0 0.25rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
}

.article-card h3 a {
    color: inherit;
    text-decoration: none;
}

.article-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.5;
}

.article-read-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--link);
}

.article-header {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.article-header .article-tag {
    color: var(--accent);
}

.article-title {
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0.6rem 0 1.3rem;
}

.article-body p {
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0 0 1.1rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--link);
    text-decoration: none;
}

.topic-tag {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
    margin-bottom: 0.4rem;
}

.topic-blurb {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 1rem;
}

.topic-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.topic-highlight {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    background: var(--surf);
    font-size: 0.88rem;
    display: flex;
    gap: 0.5rem;
}

.topic-highlight::before {
    content: '›';
    color: var(--accent);
    font-family: var(--mono);
}

/* ─── Footer ─── */

footer {
    max-width: 680px;
    margin: 3rem auto 0;
    padding: 1.25rem 1.5rem 2.5rem;
    border-top: 3px double var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.75rem;
}

.footer-links a {
    color: var(--link);
    text-decoration: none;
}

.footer-meta {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ─── Page background patterns ─── */

body.page-lego {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 700'%3E %3Cg fill='none' stroke='%23D9D8CF' stroke-width='1.3'%3E %3Cg transform='translate(60,110) rotate(-10)' opacity='0.4'%3E%3Crect x='-17' y='0' width='34' height='18' rx='3'/%3E%3Ccircle cx='-8' cy='-4' r='6'/%3E%3Ccircle cx='8' cy='-4' r='6'/%3E%3C/g%3E %3Cg transform='translate(340,60) rotate(18)' opacity='0.32'%3E%3Crect x='-9' y='0' width='18' height='14' rx='2'/%3E%3Ccircle cx='0' cy='-3.5' r='4.5'/%3E%3C/g%3E %3Cg transform='translate(200,260) rotate(6)' opacity='0.44'%3E%3Crect x='-34' y='0' width='68' height='14' rx='3'/%3E%3Ccircle cx='-25.5' cy='-3' r='4.2'/%3E%3Ccircle cx='-8.5' cy='-3' r='4.2'/%3E%3Ccircle cx='8.5' cy='-3' r='4.2'/%3E%3Ccircle cx='25.5' cy='-3' r='4.2'/%3E%3C/g%3E %3Ccircle cx='420' cy='340' r='7' opacity='0.3'/%3E %3Cg transform='translate(110,420) rotate(-15)' opacity='0.36'%3E%3Crect x='-19' y='0' width='38' height='20' rx='3'/%3E%3Ccircle cx='-10' cy='-4.5' r='6.5'/%3E%3Ccircle cx='10' cy='-4.5' r='6.5'/%3E%3C/g%3E %3Cg transform='translate(300,520) rotate(30)' opacity='0.28'%3E%3Crect x='-8' y='0' width='16' height='12' rx='2'/%3E%3Ccircle cx='0' cy='-3' r='3.8'/%3E%3C/g%3E %3Cg transform='translate(430,600) rotate(-6)' opacity='0.34'%3E%3Crect x='-14' y='0' width='28' height='16' rx='3'/%3E%3Ccircle cx='-7' cy='-3.5' r='5'/%3E%3Ccircle cx='7' cy='-3.5' r='5'/%3E%3C/g%3E %3Ccircle cx='90' cy='620' r='6' opacity='0.26'/%3E %3C/g%3E %3C/svg%3E");
    background-repeat: repeat;
    background-size: 500px 700px;
}

[data-theme="dark"] body.page-lego {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 700'%3E %3Cg fill='none' stroke='%232C313A' stroke-width='1.3'%3E %3Cg transform='translate(60,110) rotate(-10)' opacity='0.22'%3E%3Crect x='-17' y='0' width='34' height='18' rx='3'/%3E%3Ccircle cx='-8' cy='-4' r='6'/%3E%3Ccircle cx='8' cy='-4' r='6'/%3E%3C/g%3E %3Cg transform='translate(340,60) rotate(18)' opacity='0.24'%3E%3Crect x='-9' y='0' width='18' height='14' rx='2'/%3E%3Ccircle cx='0' cy='-3.5' r='4.5'/%3E%3C/g%3E %3Cg transform='translate(200,260) rotate(6)' opacity='0.33'%3E%3Crect x='-34' y='0' width='68' height='14' rx='3'/%3E%3Ccircle cx='-25.5' cy='-3' r='4.2'/%3E%3Ccircle cx='-8.5' cy='-3' r='4.2'/%3E%3Ccircle cx='8.5' cy='-3' r='4.2'/%3E%3Ccircle cx='25.5' cy='-3' r='4.2'/%3E%3C/g%3E %3Ccircle cx='420' cy='340' r='7' opacity='0.22'/%3E %3Cg transform='translate(110,420) rotate(-15)' opacity='0.27'%3E%3Crect x='-19' y='0' width='38' height='20' rx='3'/%3E%3Ccircle cx='-10' cy='-4.5' r='6.5'/%3E%3Ccircle cx='10' cy='-4.5' r='6.5'/%3E%3C/g%3E %3Cg transform='translate(300,520) rotate(30)' opacity='0.2'%3E%3Crect x='-8' y='0' width='16' height='12' rx='2'/%3E%3Ccircle cx='0' cy='-3' r='3.8'/%3E%3C/g%3E %3Cg transform='translate(430,600) rotate(-6)' opacity='0.25'%3E%3Crect x='-14' y='0' width='28' height='16' rx='3'/%3E%3Ccircle cx='-7' cy='-3.5' r='5'/%3E%3Ccircle cx='7' cy='-3.5' r='5'/%3E%3C/g%3E %3Ccircle cx='90' cy='620' r='6' opacity='0.19'/%3E %3C/g%3E %3C/svg%3E");
}

body.page-diy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 700'%3E %3Cg fill='none' stroke='%23D9D8CF' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath transform='translate(70,90) rotate(-8)' opacity='0.32' stroke-width='1.4' d='M-22 0 H-12 L-6 -8 L2 8 L10 -8 L16 0 H26'/%3E %3Cpath transform='translate(330,140) rotate(20)' opacity='0.28' stroke-width='1.3' d='M-16 0 H-4 M-4 -9 V9 M4 -9 V9 M4 0 H16'/%3E %3Cpath transform='translate(160,300) rotate(-15)' opacity='0.34' stroke-width='1.4' d='M-16 0 H-6 M-6 -8 L-6 8 L6 0 Z M6 -8 V8 M6 0 H16'/%3E %3Cg transform='translate(390,320) rotate(10)' opacity='0.3' stroke-width='1.3'%3E %3Ccircle cx='0' cy='0' r='11'/%3E %3Cpath d='M-4 9 L-10 20 M2 11 L2 22 M7 8 L14 18'/%3E %3C/g%3E %3Cg transform='translate(90,460) rotate(0)' opacity='0.3' stroke-width='1.3'%3E %3Crect x='-14' y='-8' width='28' height='16' rx='1'/%3E %3Cpath d='M-14 -4 H-19 M-14 4 H-19 M14 -4 H19 M14 4 H19'/%3E %3C/g%3E %3Cpath transform='translate(320,560) rotate(35) scale(0.75)' opacity='0.24' stroke-width='1.4' d='M-22 0 H-12 L-6 -8 L2 8 L10 -8 L16 0 H26'/%3E %3Cpath transform='translate(430,610) rotate(-25)' opacity='0.26' stroke-width='1.2' d='M-14 0 H-5 M-5 -7 V7 M5 -7 V7 M5 0 H14'/%3E %3C/g%3E %3C/svg%3E");
    background-repeat: repeat;
    background-size: 500px 700px;
}

[data-theme="dark"] body.page-diy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 700'%3E %3Cg fill='none' stroke='%232C313A' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath transform='translate(70,90) rotate(-8)' opacity='0.18' stroke-width='1.4' d='M-22 0 H-12 L-6 -8 L2 8 L10 -8 L16 0 H26'/%3E %3Cpath transform='translate(330,140) rotate(20)' opacity='0.2' stroke-width='1.3' d='M-16 0 H-4 M-4 -9 V9 M4 -9 V9 M4 0 H16'/%3E %3Cpath transform='translate(160,300) rotate(-15)' opacity='0.25' stroke-width='1.4' d='M-16 0 H-6 L-6 -8 L-6 8 L6 0 Z M6 -8 V8 M6 0 H16'/%3E %3Cg transform='translate(390,320) rotate(10)' opacity='0.22' stroke-width='1.3'%3E %3Ccircle cx='0' cy='0' r='11'/%3E %3Cpath d='M-4 9 L-10 20 M2 11 L2 22 M7 8 L14 18'/%3E %3C/g%3E %3Cg transform='translate(90,460) rotate(0)' opacity='0.22' stroke-width='1.3'%3E %3Crect x='-14' y='-8' width='28' height='16' rx='1'/%3E %3Cpath d='M-14 -4 H-19 M-14 4 H-19 M14 -4 H19 M14 4 H19'/%3E %3C/g%3E %3Cpath transform='translate(320,560) rotate(35) scale(0.75)' opacity='0.18' stroke-width='1.4' d='M-22 0 H-12 L-6 -8 L2 8 L10 -8 L16 0 H26'/%3E %3Cpath transform='translate(430,610) rotate(-25)' opacity='0.19' stroke-width='1.2' d='M-14 0 H-5 M-5 -7 V7 M5 -7 V7 M5 0 H14'/%3E %3C/g%3E %3C/svg%3E");
}

/* ─── Mobile ─── */

@media (max-width: 520px) {
    header {
        padding: 1.1rem 1.25rem 0;
    }

    nav { gap: 0.6rem 0.9rem; }

    .section-banner {
        height: 260px;
        background-attachment: scroll;
    }

    .banner-text h2 { font-size: 1.8rem; }

    .fact-group {
        grid-template-columns: 72px 1fr;
    }

    .item-thumb {
        width: 54px;
        height: 54px;
    }

    .item-links {
        flex-wrap: wrap;
    }
}