/* Shared site chrome: top nav + hub landing + admin dashboard.
   Section-specific looks (diary cream/serif, life magazine) live in their own CSS. */
:root { --ink:#23201c; --muted:#6b645a; --line:#e7e1d6; --bg:#faf8f3; --accent:#3a3a3a; }
* { box-sizing: border-box; }

.site-nav {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 0.7rem 1.4rem; border-bottom: 1px solid var(--line);
    background: rgba(250,248,243,0.92); backdrop-filter: saturate(120%) blur(6px);
    position: sticky; top: 0; z-index: 50;
    font-family: 'Crimson Pro', Georgia, serif;
}
.site-nav .brand { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.site-nav nav { margin-left: auto; display: flex; gap: 1.1rem; }
.site-nav nav a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: .2rem 0; border-bottom: 2px solid transparent; }
.site-nav nav a:hover { color: var(--ink); }
.site-nav nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
/* injected into static Life issue/guide pages — same sticky bar as everywhere else */
.site-nav.embed { position: sticky; }

/* Hub landing */
.hub { max-width: 880px; margin: 0 auto; padding: 4rem 1.5rem 5rem; font-family: 'Crimson Pro', Georgia, serif; }
.hub-hero { text-align: center; margin-bottom: 3rem; }
.hub-hero h1 { font-family: 'Noto Serif SC', serif; font-size: 2.6rem; margin: 0 0 .4rem; color: var(--ink); }
.hub-hero p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.25rem; }
.hub-card { display: block; padding: 1.6rem 1.4rem; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.hub-card h2 { font-family: 'Noto Serif SC', serif; margin: 0 0 .5rem; font-size: 1.3rem; color: var(--ink); }
.hub-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }

/* Admin dashboard */
.admin-dash { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem; font-family: 'Crimson Pro', Georgia, serif; }
.admin-dash h1 { font-family: 'Noto Serif SC', serif; color: var(--ink); }
.admin-dash .tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.admin-dash .tool { display: block; padding: 1.3rem; border: 1px solid var(--line); border-radius: 8px; background:#fff; text-decoration:none; color:inherit; }
.admin-dash .tool:hover { box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.admin-dash .tool h3 { margin: 0 0 .35rem; color: var(--ink); }
.admin-dash .tool p { margin: 0; color: var(--muted); font-size: .9rem; }
.admin-dash .tool.soon { opacity: .55; }
.admin-dash .logout { margin-top: 2rem; }
.admin-dash .logout button { background: transparent; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }