/* Minimal tokens */
:root{
    --bg: #fefefe;
    --fg: #1f1f1f;
    --muted: #555;
    --link: #0b57d0;
    --chip-bg: #fff;
    --chip-fg: #333;
    --progress: #0b57d0;
    --header-offset: 72px;   /* fallback value */
    --header-offset-extra: 12px; /* small breathing room */
}
@media (prefers-color-scheme: dark){
    :root{
        --bg: #1f1f1f;
        --fg: #fefefe;
        --muted: #b0b0b0;
        --link: #79a7ff;
        --chip-bg: #121212;
        --chip-fg: #ddd;
        --progress: #79a7ff;
    }
}
*{
    box-sizing:border-box
}
html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--fg);
    font: 18px/1.8 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
html {
    scroll-padding-top: calc(var(--header-offset) + var(--header-offset-extra));
}
img{
    max-width:100%;
    height:auto;
    display:block
}
a{
    color:var(--link);
    text-decoration:none;
    transition: background-color 0.3s ease;
}
a:hover, a:focus{
    text-decoration:none;
}
h1{
    font-size:1.8rem;
    line-height:1.2;
    margin:0 0 .25rem
}
h2{
    font-size:1.2rem
}
p{
    margin:.75rem 0 .5rem
}
small {
    display:block;
    text-align:right;
    opacity:0.5;
    font-size:0.75rem;
    margin-top:-2rem;
    margin-bottom:0.8rem;
    font-style:italic;
}
main{
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem
}
.site-header{
    border-bottom:1px solid rgba(127,127,127,.2);
    position:sticky;
    top:0;
    background:var(--bg);
    z-index:10
}
.nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.5rem;
    padding:.5rem 2rem;
    max-width: 760px;
    margin:0 auto
}
.nav-left{
    display:flex;
    gap:1rem;
    list-style:none;
    padding:0;
    margin:0
}
.logo img{
    width:36px;
    height:36px
}
.point{
    min-height:100vh;
}
.article-header .source{
    color:var(--muted);
    margin:.25rem 0 1rem;
    font-style: italic;
    font-size: 16px;
}
.lead-media img{
    margin: 1rem 0;
    width: 100%;
}
.article-body p{
    margin: 1rem 0 3rem;
    font-size:1.0625rem
}
.article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem  .5rem;
    align-items:center;
    margin-top:1rem
}
.article-meta time, .article-meta .byline{
    color:var(--muted)
}
.article-meta .meta-date,.archive-list li a .t .meta-date{
    font-size: .75rem;
    flex:0 0 100%;
    color:var(--muted);
}
.archive-list li a .t .meta-date{
    display: block;
}
.chip-c{
    background:var(--chip-bg);
    color:var(--chip-fg);
    border-radius:999px;
    padding:.15rem .6rem;
    font-size:.75rem;
    border:1px solid rgba(127,127,127,.4)
}
.chip{
    background:var(--chip-bg);
    color:var(--chip-fg);
    border-radius:999px;
    padding:.15rem .6rem;
    font-size:.75rem
}
.chip.muted{
    opacity:.7
}
.actions{
    margin-top:.5rem;
    display:flex;
    gap:.5rem
}
button{
    font: inherit;
    background:transparent;
    border:1px solid rgba(127,127,127,.4);
    padding:.4rem .7rem;
    border-radius:.4rem;
    color:var(--fg)
}
button:hover{
    background:rgba(127,127,127,.1)
}
.btn-link{
    border:none;
    padding:0;
}
.article-nav{
    margin: 2rem 0 3rem
}
.nav-row{
    display:flex;
    justify-content:space-between;
    gap:1rem
}
.nav-link.disabled{
    color:var(--muted)
}
.progress{
    position:fixed;
    left:0;
    top:0;
    height:3px;
    width:0;
    background:var(--progress);
    z-index:999
}
.archive-list{
    list-style:none;
    padding:0;
    margin:1rem 0
}
.archive-list li a{
    display:flex;
    justify-content:space-between;
    gap:.75rem;
    padding:.5rem 0
}
.archive-list li a .t{
    font-size: 22px;
}
.page .tagline{
    color:var(--muted)
}
.notice{
    padding:.75rem;
    border-radius:.5rem;
    margin:.75rem 0
}
.notice.success{
    background:#e6ffe6;
    color:#0a5
}
.notice.error{
    background:#ffecec;
    color:#b00
}
.site-footer {
    border-top: 1px solid rgba(127,127,127,.2);
    padding: 10px 0;
    color: var(--muted, #6b7280);
    font-size: 0.95rem;
}
.footer-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.footer-link,.footer-text {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}
.footer-link:hover {
    color: var(--fg, #1f1f1f);
}
.inline-logo {
    display: inline-flex;
    align-items: center;
    height: 1em;
    vertical-align: middle;
}
.inline-logo img {
    height: 1em;
    width: auto;
    vertical-align: middle;
}
.sep {
    opacity: .5;
}
.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lead-media {
    margin: 1rem 0;
}
.lead-media img {
    display: block;
    width: 100%;
    height: auto;
}
/* Ensure our per-section anchor targets have margin so they don't sit under header */
article.unit, section.act {
    /* extra safe gap so headings aren't hidden by fixed header */
    scroll-margin-top: calc(var(--header-offset) + var(--header-offset-extra));
}

/* target pseudo-class fallback (caught for instant jumps) */
:target {
    /* Protect against older browsers; JS does programmatic scroll anyway */
    scroll-margin-top: calc(var(--header-offset) + var(--header-offset-extra));
}

@media (prefers-color-scheme: dark){
    .lead-media img{
        filter: invert(.9);
    }
}
@media (prefers-color-scheme: light){
    .lead-media img.line-art{
        filter: none;
    }
}
@media (min-width: 720px){
    h1{
        font-size:2rem
    }
    :root {
        --content-pad: 1.25rem;
    }
}
@media (max-width: 640px){
    .site-footer .footer-line{
        flex-direction:column;
        gap:.25rem;
    }
    .site-footer .footer-line .sep{
        display:none;
    }
    .site-footer .footer-line > *{
        display:block;
        text-align:center;
        width:100%;
    }
}