/* Milapulse design system — calm, editorial, long-form-first.
   A deliberate counter to engagement-maximising social media: generous
   reading measure, a quiet jade-on-ink palette (the DPN house colour), and
   no external font/asset CDNs by design (the platform refuses surveillance).
   Light + dark are token-driven off prefers-color-scheme. */

/* ---- design tokens --------------------------------------------------- */
:root {
    color-scheme: light dark;

    /* jade — the DPN accent (jade-on-ink). One ramp, used sparingly. */
    --jade-50:  #ecfdf5;
    --jade-300: #6ee7b7;
    --jade-500: #10b07a;
    --jade-600: #0a8f63;
    --jade-700: #0a734f;

    /* light theme (warm paper) */
    --bg:        #faf9f6;
    --surface:   #ffffff;
    --surface-2: #f4f2ec;
    --border:    #e6e2d8;
    --ink:       #1c1b18;       /* primary text */
    --ink-2:     #56524a;       /* secondary text */
    --ink-3:     #8a857a;       /* muted / meta */
    --accent:    var(--jade-600);
    --accent-ink:#ffffff;
    --accent-soft: var(--jade-50);
    --danger:    #b4231f;
    --shadow:    0 1px 2px rgba(28,27,24,.04), 0 6px 24px -12px rgba(28,27,24,.14);
    --ring:      0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

    /* type */
    --serif: "Iowan Old Style", "Source Serif 4", "Source Serif Pro",
             Georgia, Cambria, "Times New Roman", serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
    --mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
             "Roboto Mono", Menlo, Consolas, monospace;

    --radius:   14px;
    --radius-sm: 9px;
    --measure:  44rem;     /* reading column */
    --wide:     64rem;     /* app/management column */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #131311;       /* warm ink */
        --surface:   #1b1b18;
        --surface-2: #232220;
        --border:    #322f2a;
        --ink:       #ece9e1;
        --ink-2:     #b3aea2;
        --ink-3:     #807b70;
        --accent:    var(--jade-500);
        --accent-ink:#06251a;
        --accent-soft: color-mix(in srgb, var(--jade-500) 16%, transparent);
        --danger:    #f0857f;
        --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    }
}

/* ---- reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ---- layout ---------------------------------------------------------- */
.wrap   { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 1.25rem; }
.wrap--wide { max-width: var(--wide); }
main    { flex: 1; padding-block: 2.75rem 4rem; }

/* ---- site header ----------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 650; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand__name { font-size: 1.06rem; letter-spacing: -0.01em; }
.brand__name b { font-weight: 750; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a { color: var(--ink-2); padding: .4rem .6rem; border-radius: 8px; font-size: .95rem; }
.nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav__who { color: var(--ink-3); font-size: .9rem; padding-inline: .4rem; }
.nav__who b { color: var(--ink-2); font-weight: 600; }

/* ---- buttons --------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: inherit; font-weight: 600; font-size: .95rem; line-height: 1;
    padding: .62rem .95rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    cursor: pointer; transition: transform .06s ease, background .15s ease, border-color .15s ease;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--jade-700); border-color: var(--jade-700); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: transparent; }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn--lg { padding: .8rem 1.3rem; font-size: 1rem; }
.btn__icon { width: 1.05em; height: 1.05em; }

/* ---- cards / surfaces ------------------------------------------------ */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}

.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 650; letter-spacing: .02em;
    text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--border);
}
.badge--draft { color: #9a6b08; background: color-mix(in srgb, #d99b1f 16%, transparent); border-color: color-mix(in srgb, #d99b1f 30%, var(--border)); }
.badge--live  { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

/* ---- feed ------------------------------------------------------------ */
.feed-head { margin-bottom: 1.75rem; }
.feed-head h1 { font-family: var(--serif); font-size: 1.9rem; letter-spacing: -.02em; }
.feed-head p  { color: var(--ink-2); margin-top: .35rem; }

.feed { display: flex; flex-direction: column; gap: 1.1rem; }

.post-card { padding: 1.4rem 1.5rem; }
.post-card a.post-card__title { color: var(--ink); }
.post-card__title {
    font-family: var(--serif); font-size: 1.4rem; line-height: 1.25;
    letter-spacing: -.015em; font-weight: 650; display: block;
}
.post-card:hover .post-card__title { color: var(--accent); }
.post-card__excerpt { color: var(--ink-2); margin-top: .55rem; }
.post-card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    color: var(--ink-3); font-size: .88rem; margin-top: .9rem;
}
.dot { color: var(--ink-3); opacity: .6; }

/* the END — the whole point: the feed terminates. */
.feed-end { text-align: center; margin-top: 3rem; color: var(--ink-3); }
.feed-end__rule { display: flex; align-items: center; gap: 1rem; }
.feed-end__rule::before, .feed-end__rule::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(to var(--dir, right), transparent, var(--border));
}
.feed-end__rule::after { --dir: left; }
.feed-end__word { font-family: var(--serif); font-style: italic; font-size: .95rem; letter-spacing: .04em; }
.feed-end p { margin-top: .6rem; font-size: .88rem; max-width: 26rem; margin-inline: auto; }

/* ---- single post (reading view) ------------------------------------- */
.article header { margin-bottom: 2rem; }
.article__title { font-family: var(--serif); font-size: 2.3rem; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
.article__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--ink-3); font-size: .92rem; margin-top: 1rem; }
.avatar {
    width: 1.7rem; height: 1.7rem; border-radius: 999px; flex: none;
    background: var(--accent-soft); color: var(--accent);
    display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem;
}
.prose {
    font-family: var(--serif); font-size: 1.2rem; line-height: 1.78; color: var(--ink);
}
.prose > * + * { margin-top: 1.3rem; }
.prose h2 { font-size: 1.55rem; line-height: 1.25; margin-top: 2.4rem; letter-spacing: -.015em; }
.prose h3 { font-size: 1.28rem; margin-top: 2rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose blockquote {
    border-left: 3px solid var(--accent); padding-left: 1.1rem;
    color: var(--ink-2); font-style: italic;
}
.prose code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .12em .35em; border-radius: 5px; }
.prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose img { border-radius: var(--radius-sm); }
.prose hr { border: none; border-top: 1px solid var(--border); }

.article__foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }

/* ---- forms / editor -------------------------------------------------- */
.form-page h1 { font-family: var(--serif); font-size: 1.7rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.form-page .sub { color: var(--ink-2); margin-bottom: 1.6rem; }
.field { display: block; margin-bottom: 1.2rem; }
.field__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; color: var(--ink-2); }
.field__hint { color: var(--ink-3); font-size: .82rem; margin-top: .4rem; }
.input, .textarea {
    width: 100%; font: inherit; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem .85rem; transition: border-color .15s ease;
}
.input:focus, .textarea:focus { border-color: var(--accent); }
.input--title { font-family: var(--serif); font-size: 1.45rem; font-weight: 650; letter-spacing: -.015em; padding: .65rem .85rem; }
.textarea { font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; resize: vertical; min-height: 22rem; }
.editor-bar {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
    margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--border);
}
.editor-bar__left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.editor-bar__actions { display: flex; gap: .6rem; }
.switch { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .92rem; cursor: pointer; user-select: none; }
.switch input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

/* ---- management dashboard ------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.page-head h1 { font-family: var(--serif); font-size: 1.8rem; letter-spacing: -.02em; }
.page-head p { color: var(--ink-2); margin-top: .25rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.75rem; }
.stat { padding: 1rem 1.2rem; }
.stat__n { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat__l { color: var(--ink-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .45rem; }

.manage-list { overflow: hidden; }
.manage-row {
    display: grid; grid-template-columns: 1fr auto; gap: .75rem 1rem; align-items: center;
    padding: 1rem 1.3rem; border-bottom: 1px solid var(--border);
}
.manage-row:last-child { border-bottom: none; }
.manage-row__title { font-family: var(--serif); font-weight: 650; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.manage-row__title:hover { color: var(--accent); }
.manage-row__meta { color: var(--ink-3); font-size: .85rem; margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.manage-row__actions { display: flex; gap: .4rem; align-items: center; }

/* ---- empty state ----------------------------------------------------- */
.empty { text-align: center; padding: 3.5rem 1.5rem; }
.empty__mark { width: 46px; height: 46px; color: var(--ink-3); margin-inline: auto; opacity: .8; }
.empty h2 { font-family: var(--serif); font-size: 1.4rem; margin-top: 1rem; }
.empty p { color: var(--ink-2); margin: .5rem auto 1.4rem; max-width: 28rem; }

/* ---- login / hero ---------------------------------------------------- */
.hero { text-align: center; padding-block: 2rem 1rem; }
.hero__mark { width: 56px; height: 56px; color: var(--accent); margin-inline: auto; }
.hero h1 { font-family: var(--serif); font-size: 2.5rem; line-height: 1.1; letter-spacing: -.03em; margin-top: 1.3rem; }
.hero__lede { font-family: var(--serif); font-size: 1.25rem; color: var(--ink-2); margin: 1.1rem auto 0; max-width: 34rem; line-height: 1.6; }

.login-card { max-width: 26rem; margin: 2.25rem auto 0; padding: 1.8rem; text-align: center; }
.login-card h2 { font-size: 1.15rem; font-family: var(--serif); }
.login-card p { color: var(--ink-2); font-size: .94rem; margin: .5rem 0 1.4rem; }
.login-card .btn { width: 100%; }
.login-card__note {
    margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
    color: var(--ink-3); font-size: .85rem; display: flex; gap: .55rem; align-items: flex-start; text-align: left;
}
.login-card__note svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; color: var(--accent); }

.principles { display: grid; gap: 1rem; margin: 2.5rem auto 0; max-width: 34rem; }
.principle { display: flex; gap: .85rem; align-items: flex-start; text-align: left; }
.principle svg { width: 1.4rem; height: 1.4rem; color: var(--accent); flex: none; margin-top: .15rem; }
.principle b { font-weight: 650; }
.principle span { color: var(--ink-2); display: block; font-size: .95rem; }

/* ---- flash / notice -------------------------------------------------- */
.notice {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .8rem 1rem; border-radius: var(--radius-sm);
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    color: var(--ink); margin-bottom: 1.5rem; font-size: .95rem;
}
.notice svg { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; margin-top: .12rem; }

/* ---- footer ---------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); color: var(--ink-3); font-size: .85rem; padding-block: 1.6rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--ink-2); }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 640px) {
    body { font-size: 1rem; }
    .hero h1 { font-size: 2rem; }
    .article__title { font-size: 1.8rem; }
    .prose { font-size: 1.12rem; }
    .stats { grid-template-columns: 1fr; }
    .nav a span { display: none; }
}

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