/* Blog styles — reuses the main site's design tokens so it looks native */

/* Real font files for the names referenced below (--font-display / --font-sans).
   These reference the main site's actual font files directly — the main
   site's own asset filenames no longer carry a build hash (as of this
   change, ALL of the main site's asset filenames are stable/permanent),
   so this can point straight at them with nothing to keep in sync and
   nothing that will drift on a future rebuild. */
@font-face {
   font-family: "Fraunces";
   src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Inter";
   src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

:root {
   --radius: .75rem;
   --cream: oklch(98.4% .008 95);
   --ink: oklch(22% .03 200);
   --teal: oklch(42% .07 195);
   --teal-deep: oklch(32% .06 200);
   --teal-soft: oklch(92% .025 190);
   --coral: oklch(74% .16 40);
   --font-display: "Fraunces", ui-serif, Georgia, serif;
   --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
   --border: oklch(90% .012 95);
   --muted: oklch(95% .012 95);
   --muted-foreground: oklch(45% .02 200);
   --destructive: oklch(57.7% .245 27.325);
}

* {
   box-sizing: border-box
}

body {
   margin: 0;
   font-family: var(--font-sans);
   color: var(--ink);
   background: #fff;
   line-height: 1.65;
   font-size: 16px;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   letter-spacing: -.02em;
   font-weight: 500;
   color: var(--ink);
   line-height: 1.2
}

a {
   color: var(--teal-deep)
}

a:hover {
   color: var(--coral)
}

.blog-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: color-mix(in oklab, var(--cream) 85%, transparent);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(0, 0, 0, .06)
}

.blog-header-inner {
   max-width: 72rem;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.25rem
}

.blog-logo {
   display: flex;
   align-items: center;
   gap: .65rem;
   text-decoration: none;
   color: var(--ink)
}

.blog-logo-badge {
   position: relative;
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: .75rem;
   background: var(--cream);
   border: 1px solid rgba(0, 0, 0, .05)
}

.blog-logo-mark {
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 500;
   color: var(--ink)
}

.blog-logo-dot {
   position: absolute;
   bottom: 6px;
   right: 6px;
   width: 6px;
   height: 6px;
   border-radius: 999px;
   background: var(--coral)
}

.blog-logo-text {
   line-height: 1.2
}

.blog-logo-name {
   font-family: var(--font-display);
   font-size: 17px;
   font-weight: 500;
   color: var(--ink)
}

.blog-logo-sub {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .18em;
   color: color-mix(in oklab, var(--ink) 70%, transparent)
}

.blog-nav {
   display: flex;
   gap: 1.25rem;
   align-items: center;
   font-size: .9rem
}

.blog-nav a {
   color: var(--ink);
   text-decoration: none;
   font-weight: 500
}

.blog-nav a:hover {
   color: var(--teal-deep)
}

.wrap {
   max-width: 72rem;
   margin: 0 auto;
   padding: 0 1.25rem
}

.wrap-narrow {
   max-width: 44rem;
   margin: 0 auto;
   padding: 0 1.25rem
}

.blog-hero {
   padding: 3rem 0 2rem;
   text-align: center
}

.blog-hero h1 {
   font-size: 2.5rem;
   margin: 0 0 .5rem
}

.blog-hero p {
   color: var(--muted-foreground);
   max-width: 38rem;
   margin: 0 auto
}

.post-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 1.75rem;
   padding: 1rem 0 4rem
}

.post-card {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   background: #fff;
   transition: box-shadow .15s, transform .15s;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column
}

.post-card:hover {
   box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
   transform: translateY(-2px)
}

.post-card img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   background: var(--muted)
}

.post-card .body {
   padding: 1.1rem 1.25rem 1.4rem
}

.post-card h3 {
   font-size: 1.15rem;
   margin: 0 0 .4rem
}

.post-card p {
   color: var(--muted-foreground);
   font-size: .92rem;
   margin: 0
}

.post-meta {
   font-size: .8rem;
   color: var(--muted-foreground);
   margin-top: .7rem
}

.empty-state {
   padding: 4rem 1rem;
   text-align: center;
   color: var(--muted-foreground)
}

article.post {
   padding: 2.5rem 0 5rem
}

article.post h1 {
   font-size: 2.25rem;
   margin-bottom: .5rem
}

article.post .post-meta {
   margin-bottom: 2rem;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--border)
}

article.post .featured {
   width: 100%;
   border-radius: var(--radius);
   margin-bottom: 2rem;
   aspect-ratio: 16/9;
   object-fit: cover
}

article.post .content {
   font-size: 1.06rem
}

article.post .content img {
   max-width: 100%;
   height: auto;
   border-radius: .5rem;
   margin: 1.25rem 0
}

article.post .content h2 {
   margin-top: 2rem
}

article.post .content h3 {
   margin-top: 1.5rem
}

article.post .content a {
   text-decoration: underline
}

article.post .content blockquote {
   border-left: 3px solid var(--coral);
   margin: 1.5rem 0;
   padding: .25rem 0 .25rem 1.25rem;
   color: var(--muted-foreground);
   font-style: italic
}

article.post .content pre {
   background: var(--muted);
   padding: 1rem;
   border-radius: .5rem;
   overflow: auto
}

article.post .content ul,
article.post .content ol {
   padding-left: 1.5rem
}

/* forms / app UI (login, editor, admin) */
.card {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 2rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .06)
}

.form-group {
   margin-bottom: 1.1rem
}

.form-group label {
   display: block;
   font-size: .85rem;
   font-weight: 600;
   margin-bottom: .35rem
}

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group textarea,
.form-group select {
   width: 100%;
   padding: .65rem .85rem;
   border: 1px solid var(--border);
   border-radius: .5rem;
   font: inherit;
   font-size: .95rem;
   background: #fff;
   color: var(--ink)
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
   outline: none;
   border-color: var(--teal);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal) 20%, transparent)
}

.btn {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   padding: .65rem 1.4rem;
   border-radius: .5rem;
   font-size: .9rem;
   font-weight: 600;
   cursor: pointer;
   border: 2px solid transparent;
   text-decoration: none;
   font-family: inherit;
   background: var(--teal-deep);
   color: #fff
}

.btn:hover {
   background: var(--teal)
}

.btn-outline {
   background: transparent;
   border-color: var(--border);
   color: var(--ink)
}

.btn-outline:hover {
   background: var(--muted)
}

.btn-danger {
   background: var(--destructive);
   color: #fff
}

.btn-danger:hover {
   opacity: .9
}

.btn-sm {
   padding: .4rem .9rem;
   font-size: .8rem
}

.alert {
   padding: .85rem 1rem;
   border-radius: .5rem;
   font-size: .9rem;
   margin-bottom: 1.25rem
}

.alert-error {
   background: #fef2f2;
   color: #991b1b;
   border: 1px solid #fecaca
}

.alert-success {
   background: #f0fdf4;
   color: #166534;
   border: 1px solid #bbf7d0
}

.badge {
   display: inline-block;
   padding: .2rem .65rem;
   border-radius: 999px;
   font-size: .72rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .03em
}

.badge-draft {
   background: var(--muted);
   color: var(--muted-foreground)
}

.badge-pending {
   background: #fef9c3;
   color: #854d0e
}

.badge-approved,
.badge-published {
   background: #dcfce7;
   color: #166534
}

.badge-rejected {
   background: #fee2e2;
   color: #991b1b
}

table.admin-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .9rem
}

table.admin-table th {
   text-align: left;
   font-size: .75rem;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--muted-foreground);
   border-bottom: 1px solid var(--border);
   padding: .6rem .5rem
}

table.admin-table td {
   padding: .85rem .5rem;
   border-bottom: 1px solid var(--border);
   vertical-align: middle
}

.app-shell {
   min-height: 100vh;
   background: var(--cream)
}

.app-header {
   background: var(--teal-deep);
   color: #fff
}

.app-header .wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: .9rem 1.25rem
}

.app-header a {
   color: #fff
}

.app-header .blog-nav a {
   color: rgba(255, 255, 255, .85)
}

.app-header .blog-nav a:hover {
   color: #fff
}

.app-main {
   padding: 2.5rem 0
}

.two-col {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 2rem;
   align-items: start
}

@media (max-width:800px) {
   .two-col {
      grid-template-columns: 1fr
   }
}

.editor-toolbar-note {
   font-size: .8rem;
   color: var(--muted-foreground);
   margin-top: .4rem
}

.section-title {
   font-size: 1.5rem;
   margin: 0 0 1.25rem
}

.muted {
   color: var(--muted-foreground)
}

.stack {
   display: flex;
   flex-direction: column;
   gap: .6rem
}

.row {
   display: flex;
   gap: .6rem;
   align-items: center
}

.space-between {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.site-footer {
   margin-top: 6rem;
   border-top: 1px solid rgba(0, 0, 0, .05);
   background: var(--cream)
}

.footer-inner {
   max-width: 80rem;
   margin: 0 auto;
   padding: 4rem 1.25rem
}

.footer-grid {
   display: grid;
   gap: 3rem;
   grid-template-columns: 1fr
}

@media (min-width:768px) {
   .footer-grid {
      grid-template-columns: 2fr 1fr 1fr
   }
}

.footer-brand-col {
   max-width: 26rem
}

.footer-desc {
   margin-top: 1.25rem;
   font-size: .875rem;
   line-height: 1.6;
   color: color-mix(in oklab, var(--ink) 70%, transparent)
}

.footer-badges {
   margin-top: 1.5rem;
   display: flex;
   flex-wrap: wrap;
   gap: .5rem
}

.footer-badge {
   display: inline-flex;
   align-items: center;
   border-radius: 999px;
   background: #fff;
   padding: .25rem .75rem;
   font-size: .75rem;
   font-weight: 500;
   color: color-mix(in oklab, var(--ink) 75%, transparent);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset
}

.footer-col-title {
   margin-bottom: 1rem;
   font-size: .75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .18em;
   color: color-mix(in oklab, var(--ink) 60%, transparent)
}

.footer-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: .625rem;
   font-size: .875rem
}

.footer-list a {
   color: color-mix(in oklab, var(--ink) 80%, transparent);
   text-decoration: none
}

.footer-list a:hover {
   color: var(--coral)
}

.footer-email {
   margin-top: 1.5rem;
   font-size: .875rem;
   color: color-mix(in oklab, var(--ink) 70%, transparent)
}

.footer-bottom {
   margin-top: 3.5rem;
   display: flex;
   flex-direction: column;
   gap: .75rem;
   border-top: 1px solid rgba(0, 0, 0, .05);
   padding-top: 1.5rem;
   font-size: .75rem;
   color: color-mix(in oklab, var(--ink) 60%, transparent)
}

@media (min-width:768px) {
   .footer-bottom {
      flex-direction: row;
      align-items: center;
      justify-content: space-between
   }
}