/* nityesh.com — port of the "chronicles" theme. Plain CSS, no framework.
   Cream #f8f4e9, EB Garamond serif type, Inter for UI chrome, logo-centered
   landing header. Values lifted from the theme's screen.css + Phase 0 snapshots. */

:root {
  --background-color: #f8f4e9;
  --accent-color: #b45309;
  --banner-color: #b85c37;

  --color-primary-text: #15171a;
  --color-secondary-text: rgba(0, 0, 0, .55);
  --color-muted: #666;
  --color-border: rgba(0, 0, 0, .1);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-serif: "EB Garamond", Georgia, Times, serif;
  --font-mono: "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", monospace;

  --container-width: 1320px;
  --content-width: 720px;
  --container-gap: clamp(24px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--background-color);
  color: var(--color-primary-text);
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; height: auto; max-width: 100%; }
iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }

a { color: var(--color-primary-text); text-decoration: none; }
a:hover { opacity: .8; }

.has-serif-title .is-title,
.has-serif-title .gh-content h2,
.has-serif-title .gh-content h3 { font-family: var(--font-serif); }

/* ---- Layout scaffolding ---- */
.gh-viewport { display: flex; flex-direction: column; min-height: 100vh; }
.gh-main { flex-grow: 1; }
.gh-outer { padding: 0 max(4vmin, 20px); }
.gh-inner { margin: 0 auto; max-width: var(--container-width); width: 100%; }

/* ---- Promo banners (orange bars top + bottom) ---- */
#banner, #footer {
  background-color: var(--banner-color);
  color: #fff;
  text-align: center;
  padding: 15px 5px 18px;
  font-size: 1.4rem;
}
#footer { margin-top: 0; }
#banner a, #footer a { color: #fff; }

/* ---- Navigation: logo centered ---- */
.gh-navigation {
  background-color: var(--background-color);
  height: 100px;
  display: flex;
  align-items: center;
}
.gh-navigation-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.gh-navigation-brand { grid-column-start: 2; justify-self: center; }
.gh-navigation-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--accent-color);
}
.gh-navigation-logo img { width: 34px; height: 34px; object-fit: contain; }

/* ---- Homepage: about-preview ---- */
.about-preview { margin: 4rem auto; max-width: 900px; padding: 0 2rem; }
.about-content { align-items: center; display: flex; gap: 6rem; }
.about-image { flex: 0 0 200px; }
.about-image img { border-radius: 8px; height: 200px; object-fit: cover; width: 100%; }
.about-text { color: #6a6a6a; flex: 1; font-size: 1.8rem; line-height: 1.6; }
.about-text p { margin-bottom: 1.5rem; }
.about-text p:last-child { margin-bottom: 0; }
.about-text a:not(.kg-btn) { color: var(--accent-color); text-decoration: underline; }
.about-text blockquote {
  border-left: 3px solid var(--accent-color);
  padding-left: 1.6rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #555;
}
.about-text strong { color: #333; }

/* ---- Post list container (the cream card) ---- */
.post-list-container .gh-container-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  background: #fdfbf5;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px;
  padding: 4rem clamp(2rem, 4vw, 6rem);
  margin-bottom: 6rem;
}

/* ---- Tag filter ---- */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 4rem;
  max-width: 800px;
  width: 100%;
}
.tag-filter-item {
  background: none;
  border: 1.5px solid transparent;
  border-radius: 8px;
  color: var(--color-primary-text);
  cursor: pointer;
  font-size: 1.6rem;
  padding: .8rem 1.6rem;
  transition: all .2s ease;
}
.tag-filter-item.active { background-color: #fff; border-color: #333; }
.tag-filter-item:hover:not(.active) { background-color: rgba(0, 0, 0, .03); color: #666; }

/* ---- Feed / post rows ---- */
.gh-feed { display: flex; flex-direction: column; width: 100%; }
.post-list-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
}
.post-list-item:last-child { border-bottom: none; }
.post-content { flex: 1; padding-right: 4rem; }
.post-title { font-size: 2rem; font-weight: 600; line-height: 1.3; margin-bottom: 1rem; }
.post-title a { color: var(--color-primary-text); }
.post-title a:hover { color: #666; opacity: 1; }
.post-excerpt { color: #666; font-size: 1.4rem; margin-bottom: 1rem; font-family: var(--font-sans); }
.post-date { color: #888; font-size: 1.4rem; font-weight: 600; }
.post-image { flex: 0 0 200px; }
.post-image img { border-radius: 6px; height: 140px; object-fit: cover; width: 200px; }

/* ---- Tag archive header ---- */
.gh-archive { margin: 8rem auto 2rem; text-align: center; }
.gh-archive-wrapper { max-width: 720px; margin: 0 auto; }
.gh-archive .gh-article-title { font-size: clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem); letter-spacing: -.022em; }
.gh-archive .gh-article-excerpt {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  color: var(--color-secondary-text);
  white-space: pre-line;
}

/* ---- Post page ---- */
.gh-article { padding-bottom: 6rem; }
.gh-canvas { max-width: var(--content-width); margin-left: auto; margin-right: auto; padding: 0 20px; }
.gh-article-header { margin-top: 5rem; }
.gh-article-tag {
  color: var(--accent-color);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .01em;
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.gh-article-tag:hover { opacity: .8; }
.gh-article-title {
  font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem));
  letter-spacing: -.022em;
  line-height: 1.1;
}
.gh-article-excerpt {
  font-size: clamp(1.7rem, .23vw + 1.61rem, 1.9rem);
  letter-spacing: -.018em;
  line-height: 1.45;
  margin-top: 14px;
  color: var(--color-secondary-text);
  font-family: var(--font-serif);
}
.gh-article-meta { align-items: center; display: flex; gap: 8px; margin-top: 24px; }
.gh-article-author-image img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #e6e6e6;
}
.gh-article-meta-wrapper { display: flex; flex-direction: column; gap: 2px; }
.gh-article-author-name { font-size: 1.5rem; font-weight: 600; font-family: var(--font-sans); }
.gh-article-meta-content { color: var(--color-secondary-text); font-size: 1.35rem; font-weight: 500; }
.gh-article-image { max-width: 1040px; margin: 4rem auto 0; padding: 0 20px; }
.gh-article-image img { width: 100%; border-radius: 6px; }
.gh-article-image figcaption { text-align: center; font-size: 1.4rem; color: var(--color-secondary-text); margin-top: 1rem; }

/* ---- Content typography (rich-text body) ---- */
.gh-content { font-size: 1.7rem; letter-spacing: -.01em; margin-top: 4rem; }
.has-serif-body .gh-content { font-family: var(--font-serif); font-size: 2rem; line-height: 1.55; }
.gh-content > * + * { margin-top: 2.8rem; }
/* Heading + link typography is shared by the published body (.gh-content) and the
   editor canvas (.editor-canvas__body) so the two surfaces can't drift. Both bodies
   render at 2rem, so the em-based sizes compute identically; the descendant editor
   selectors (specificity 0,1,1) beat Lexxy's zero-specificity :where(.lexxy-content). */
.gh-content > :is(h1, h2, h3, h4, h5, h6),
.editor-canvas__body :is(h1, h2, h3, h4, h5, h6) { margin-top: 5.6rem; font-family: var(--font-serif); line-height: 1.2; }
.gh-content h1, .editor-canvas__body h1 { font-size: 2.2em; letter-spacing: -.02em; }
.gh-content h2, .editor-canvas__body h2 { font-size: 1.6em; letter-spacing: -.02em; }
.gh-content h3, .editor-canvas__body h3 { font-size: 1.3em; letter-spacing: -.017em; }
.gh-content h4, .editor-canvas__body h4 { font-size: 1.15em; letter-spacing: -.01em; }
.gh-content a, .editor-canvas__body a { color: var(--accent-color); text-decoration: underline; }
.gh-content a:hover, .editor-canvas__body a:hover { opacity: .8; }
.gh-content :is(ul, ol) { padding-left: 2.8rem; }
.gh-content :is(li + li, li :is(ul, ol)) { margin-top: .8rem; }
.gh-content blockquote,
.editor-canvas__body blockquote {
  border-left: 3px solid var(--accent-color);
  padding-left: 2rem;
  font-style: italic;
  color: #444;
}
.gh-content img { margin-left: auto; margin-right: auto; border-radius: 4px; }
.gh-content figure { margin-top: 4rem; margin-bottom: 4rem; }
.gh-content figcaption {
  text-align: center;
  font-size: 1.4rem;
  font-family: var(--font-sans);
  color: var(--color-secondary-text);
  margin-top: 1rem;
}
.gh-content hr { background-color: var(--color-border); border: 0; height: 1px; margin: 4.8rem 0; }

/* ---- Koenig cards ---- */
.kg-card { margin-top: 4rem; margin-bottom: 4rem; }

/* image + caption */
.kg-image-card img { margin-inline: auto; }
.kg-width-wide img { max-width: min(85vw, 1040px); }
.kg-width-full img { max-width: 100%; }

/* gallery */
.kg-gallery-container { display: flex; flex-direction: column; gap: 10px; margin-inline: auto; }
.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image { flex: 1 1 0; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; margin: 0; }

/* bookmark */
.kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  min-height: 148px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--background-color);
  color: var(--color-primary-text);
  text-decoration: none;
  font-family: var(--font-sans);
}
.kg-bookmark-content { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 1.6rem 2rem; }
.kg-bookmark-title { font-size: 1.5rem; font-weight: 600; }
.kg-bookmark-description { font-size: 1.4rem; margin-top: .4rem; color: var(--color-secondary-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: 1.4rem; font-size: 1.3rem; }
.kg-bookmark-icon { width: 20px; height: 20px; margin: 0; }
.kg-bookmark-thumbnail { position: relative; flex: 0 0 30%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; }

/* callout */
.kg-callout-card { display: flex; gap: 1rem; padding: 1.6rem 2rem; border-radius: 4px; font-family: var(--font-sans); font-size: 1.6rem; }
.kg-callout-card-grey { background: rgba(0, 0, 0, .05); }
.kg-callout-emoji { font-size: 1.8rem; }

/* button */
.kg-button-card { display: flex; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: .8em 1.6em;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--font-sans);
  line-height: 1.2;
}
.kg-btn-accent { background-color: var(--accent-color); color: #fff; }
.kg-btn-accent:hover { opacity: .9; }

/* toggle */
.kg-toggle-card { border-bottom: 1px solid var(--color-border); padding: 1.6rem 0; }
.kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.kg-toggle-heading-text { font-size: 2rem; font-weight: 600; font-family: var(--font-serif); }
.kg-toggle-card-icon { background: none; border: 0; cursor: pointer; width: 24px; height: 24px; padding: 0; }
.kg-toggle-card-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.kg-toggle-content { margin-top: 1.2rem; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon svg { transform: rotate(180deg); }

/* code */
.gh-content pre {
  background: rgba(0, 0, 0, .05);
  color: var(--color-primary-text);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1.5;
  overflow: auto;
  padding: 16px 20px;
}
.gh-content pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.gh-content :not(pre) > code {
  background: rgba(0, 0, 0, .05);
  border-radius: .25em;
  font-family: var(--font-mono);
  font-size: .85em;
  padding: .15em .4em;
}

/* embeds */
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { margin-inline: auto; }
.twitter-tweet { margin-inline: auto !important; }

/* ---- Footer ---- */
.gh-footer { background-color: var(--background-color); padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid var(--color-border); }
.gh-footer-bar { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; font-size: 1.4rem; color: var(--color-secondary-text); }
.gh-footer-logo img { width: 28px; height: 28px; object-fit: contain; }
.gh-footer-menu .nav { list-style: none; display: flex; gap: 2rem; padding: 0; margin: 0; margin-left: auto; }
.gh-footer-menu a { font-size: 1.4rem; font-weight: 600; }

/* ---- 404 ---- */
.gh-error { text-align: center; padding: 8rem 20px; }
.gh-error .error-code { font-size: 8rem; font-family: var(--font-serif); font-weight: 700; }
.gh-error .error-message { font-size: 2rem; color: var(--color-secondary-text); margin-top: 1rem; }
.gh-error a { color: var(--accent-color); text-decoration: underline; display: inline-block; margin-top: 2rem; }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .about-content { flex-direction: column; gap: 2rem; text-align: center; }
  .about-image { flex: 0 0 auto; margin: 0 auto; width: 150px; }
  .about-image img { height: 150px; }
  .about-text blockquote { text-align: left; }

  .tag-filter { gap: 1rem; margin-bottom: 2rem; }
  .tag-filter-item { font-size: 1.4rem; padding: .6rem 1.5rem; }

  .post-list-item { flex-direction: column; padding: 2rem 0; }
  .post-content { padding-right: 0; padding-bottom: 1.5rem; width: 100%; }
  .post-title { font-size: 1.8rem; }
  .post-image { width: 100%; }
  .post-image img { width: 100%; height: 200px; }

  .post-list-container .gh-container-inner { padding: 2rem; }
  .has-serif-body .gh-content { font-size: 1.8rem; }
  .gh-footer-bar { justify-content: center; }
  .gh-footer-menu .nav { margin-left: 0; flex-wrap: wrap; justify-content: center; }
}

/* =========================================================================
   Writing surface (author-only, behind sign-in). A focused, Ghost-caliber
   workbench hand-built in plain CSS — cream + Garamond typographic continuity
   with the public site, white panels for depth, one accent for intent. It
   lives on its own bare `writing` layout; the shared tokens below cascade to
   every author view (and the public-layout sign-in card via `.auth`).
   ========================================================================= */
.writing-app,
.auth {
  --w-surface: #fbf7ec;
  --w-panel: #fffdf8;
  --w-ink: #14171a;
  --w-muted: #5f6165;
  --w-faint: #8b8d90;
  --w-line: rgba(0, 0, 0, .09);
  --w-line-strong: rgba(0, 0, 0, .17);
  --w-accent: var(--accent-color);
  --w-accent-ink: #9a460a;
  --w-danger: #b00020;
  --w-ok: #1f7a3d;
  --w-radius: 12px;
  --w-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .07);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Buttons (the one control system for the whole surface) ---- */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-size: 1.4rem; font-weight: 500; line-height: 1;
  letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  padding: .85rem 1.4rem; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--w-ink);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.w-btn:hover { opacity: 1; }
.w-btn svg { flex-shrink: 0; }
.w-btn--primary { background: var(--w-accent); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.w-btn--primary:hover { background: var(--w-accent-ink); color: #fff; }
.w-btn--ghost { background: var(--w-panel); border-color: var(--w-line-strong); }
.w-btn--ghost:hover { background: #f2ecdd; }
.w-btn--danger { background: var(--w-panel); color: var(--w-danger); border-color: rgba(176, 0, 32, .32); }
.w-btn--danger:hover { background: #fdecef; }
.w-btn--sm { font-size: 1.3rem; padding: .6rem 1rem; }
.w-btn--block { width: 100%; padding: 1.1rem; font-size: 1.5rem; }
.w-inline { display: inline; margin: 0; }

/* ---- Shared form fields ---- */
.field { display: flex; flex-direction: column; gap: .55rem; }
.field > label,
.field__label,
.stacked-form label,
.schedule-form > label {
  font-family: var(--font-sans); font-size: 1.3rem; font-weight: 600;
  color: var(--w-muted); letter-spacing: .005em;
}
.field__hint { font-size: 1.2rem; color: var(--w-faint); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="url"],
.field input[type="password"], .field textarea,
.stacked-form input[type="text"], .stacked-form input[type="email"],
.stacked-form input[type="password"], .stacked-form textarea,
.schedule-form input[type="datetime-local"] {
  width: 100%; padding: .85rem 1.1rem; font: inherit; font-size: 1.45rem;
  color: var(--w-ink); background: var(--w-panel);
  border: 1px solid var(--w-line-strong); border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus,
.stacked-form input:focus, .stacked-form textarea:focus,
.schedule-form input:focus, .embed-bar input:focus {
  outline: none; border-color: var(--w-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, .13);
}
.field textarea, .stacked-form textarea { resize: vertical; line-height: 1.5; }
.field input[type="file"] { font-size: 1.3rem; color: var(--w-muted); }
.field code, .stacked-form code { font-family: var(--font-mono); font-size: .88em; background: rgba(0, 0, 0, .05); padding: .1em .4em; border-radius: 4px; }

.errors {
  list-style: none; margin: 1.6rem auto; max-width: 72rem; padding: 1.2rem 1.6rem;
  background: #fdecef; border: 1px solid rgba(176, 0, 32, .25); border-radius: 8px;
  color: var(--w-danger); font-size: 1.4rem;
}
.errors li + li { margin-top: .4rem; }

/* ---- Status pills (dashboard rows + publish popover) ---- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  padding: .35rem .75rem; border-radius: 6px; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--draft { color: #6b6d70; background: rgba(0, 0, 0, .06); }
.status--scheduled { color: #8a5300; background: rgba(180, 83, 9, .13); }
.status--published { color: var(--w-ok); background: rgba(31, 122, 61, .13); }

/* =========================================================================
   Dashboard — the writing index
   ========================================================================= */
.writing-dash,
.form-page { max-width: 90rem; margin: 0 auto; padding: 4.4rem max(4vmin, 20px) 8rem; }

.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.dash-eyebrow { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--w-accent); margin-bottom: .5rem; }
.dash-head__brand h1 { font-family: var(--font-serif); font-size: clamp(3.4rem, 4vw, 4.2rem); font-weight: 600; letter-spacing: -.015em; }
.dash-head__actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.dash-tabs { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; border-bottom: 1px solid var(--w-line); margin-bottom: 1rem; }
.dash-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans); font-size: 1.45rem; font-weight: 500; color: var(--w-muted);
  padding: .9rem 1.1rem; transition: color .15s ease, border-color .15s ease;
}
.dash-tab:hover { color: var(--w-ink); }
.dash-tab.is-active { color: var(--w-ink); border-bottom-color: var(--w-accent); }
.dash-tab__count { font-size: 1.15rem; font-weight: 600; color: var(--w-faint); background: rgba(0, 0, 0, .05); border-radius: 20px; padding: .15rem .6rem; min-width: 2.1rem; text-align: center; }
.dash-tab.is-active .dash-tab__count { color: var(--w-accent); background: rgba(180, 83, 9, .12); }
.dash-tabs__spacer { margin-left: auto; font-size: 1.35rem; font-weight: 500; color: var(--w-muted); padding: .9rem .6rem; }
.dash-tabs__spacer:hover { color: var(--w-accent); opacity: 1; }

.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.5rem .6rem; border-bottom: 1px solid var(--w-line); }
.dash-row[hidden] { display: none; }
.dash-row:hover { background: rgba(0, 0, 0, .018); }
.dash-row__link { display: flex; align-items: baseline; gap: 1rem 1.4rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.dash-row__title { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 500; letter-spacing: -.005em; color: var(--w-ink); }
.dash-row__link:hover .dash-row__title { color: var(--w-accent); }
.dash-row__slug { font-size: 1.3rem; color: var(--w-faint); }
.dash-row__tags { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.chip { font-size: 1.15rem; font-weight: 500; color: var(--w-muted); background: rgba(0, 0, 0, .055); border-radius: 20px; padding: .25rem .8rem; letter-spacing: .01em; }
.dash-row__side { display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; }
.dash-row__date { font-size: 1.3rem; color: var(--w-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dash-empty, .dash-blank { text-align: center; color: var(--w-muted); padding: 6rem 2rem; }
.dash-blank { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.dash-blank p { font-size: 1.8rem; font-family: var(--font-serif); }

/* =========================================================================
   Connect — the "give an AI assistant the keys" page
   ========================================================================= */
.connect-lede { font-size: 1.55rem; line-height: 1.55; color: var(--w-muted); max-width: 64rem; margin-bottom: 3rem; }
.connect-lede code { font-family: var(--font-mono); font-size: .86em; background: rgba(0, 0, 0, .05); padding: .1em .4em; border-radius: 4px; }

.connect-section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--w-line); }
.connect-section > h2 { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .5rem; }
.connect-section__intro { font-size: 1.4rem; line-height: 1.5; color: var(--w-muted); max-width: 62rem; margin-bottom: 1.6rem; }

.connect-token { margin-bottom: 2.6rem; }
.connect-token > label { display: block; font-family: var(--font-sans); font-size: 1.3rem; font-weight: 600; color: var(--w-ok); margin-bottom: .7rem; }

.connect-code { position: relative; margin-bottom: 1.2rem; }
.connect-code pre {
  margin: 0; padding: 1.5rem 6rem 1.5rem 1.6rem;
  background: var(--w-ink); color: #f4efe4; border-radius: var(--w-radius);
  font-family: var(--font-mono); font-size: 1.3rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.connect-code__copy { position: absolute; top: 1.1rem; right: 1.1rem; background: var(--w-panel); }

.connect-field { margin-bottom: 1.4rem; }
.connect-field > label { display: block; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--w-faint); margin-bottom: .5rem; }
.connect-field__row { display: flex; align-items: stretch; gap: .8rem; }
.connect-field__row code {
  flex: 1; min-width: 0; display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 1.35rem; color: var(--w-ink);
  background: var(--w-panel); border: 1px solid var(--w-line-strong); border-radius: 8px;
  padding: .7rem 1.1rem; overflow-x: auto; white-space: nowrap;
}

.connect-token-form { margin-bottom: 2.4rem; }

.connect-details { margin-top: 1.8rem; }
.connect-details > summary { cursor: pointer; font-size: 1.35rem; font-weight: 500; color: var(--w-faint); }
.connect-details > summary:hover { color: var(--w-ink); }
.connect-details[open] > summary { margin-bottom: 1.4rem; }

/* =========================================================================
   Editor — the distraction-free canvas
   ========================================================================= */
.editor-shell { position: relative; min-height: 100vh; }

.editor-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  height: 6rem; padding: 0 max(3vmin, 14px);
  background: rgba(248, 244, 233, .88); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--w-line);
}
.editor-bar__side { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.editor-bar__side--end { justify-content: flex-end; }
.editor-bar__back { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.4rem; font-weight: 500; color: var(--w-muted); }
.editor-bar__back:hover { color: var(--w-ink); opacity: 1; }
.editor-bar__publish svg { opacity: .75; }

.autosave-status {
  display: inline-flex; align-items: center; min-height: 1.4em;
  font-size: 1.3rem; font-weight: 500; color: var(--w-faint);
  padding-left: 1rem; border-left: 1px solid var(--w-line);
}
.autosave-status:empty { padding-left: 0; border-left: 0; }
.autosave-status[data-state="saved"] { color: var(--w-ok); }
.autosave-status[data-state="unsaved"] { color: var(--w-muted); }
.autosave-status[data-state="error"] { color: var(--w-danger); }

/* Match the published measure: max-width + horizontal padding land the contenteditable
   at ~680px (the live .gh-content width) on any desktop viewport. Padding tracks viewport
   WIDTH (clamp/vw), not vmin — vmin tied the column to window height and narrowed it on
   tall screens. Lexxy's own content padding is zeroed below so text starts at the title's
   left edge and the wrapper width IS the writing measure. */
.editor-canvas { max-width: 76rem; margin: 0 auto; padding: 5rem clamp(20px, 4vw, 40px) 12rem; }
.editor-canvas__title,
.editor-canvas__subtitle {
  display: block; width: 100%; border: 0; background: none; padding: 0;
  resize: none; overflow: hidden; white-space: pre-wrap;
  font-family: var(--font-serif); color: var(--w-ink);
}
.editor-canvas__title {
  margin-bottom: 1.2rem; font-size: clamp(3.4rem, 4.6vw, 4.6rem); font-weight: 600;
  line-height: 1.1; letter-spacing: -.022em;
}
.editor-canvas__subtitle {
  margin-bottom: 2.8rem; font-size: clamp(1.7rem, .23vw + 1.61rem, 1.9rem);
  line-height: 1.45; letter-spacing: -.018em; color: var(--w-muted);
}
.editor-canvas__title::placeholder,
.editor-canvas__subtitle::placeholder { color: rgba(0, 0, 0, .24); }
.editor-canvas__title:focus,
.editor-canvas__subtitle:focus { outline: none; }

/* A subdued "insert embed" row that lives BELOW the body, out of the title/body seam. */
.embed-bar { display: flex; gap: .6rem; margin-top: 3.2rem; }
.embed-bar input {
  flex: 1; padding: .75rem 1rem; font-family: var(--font-sans); font-size: 1.35rem;
  color: var(--w-ink); background: var(--w-panel); border: 1px solid var(--w-line); border-radius: 8px;
}

/* The Lexxy editor is the star: match the public serif body so the writer sees what
   readers will. Theme the gem via its own --lexxy-* tokens (transparent canvas, our ink
   and accent), drop the boxed card chrome, and zero its content padding so the text sits
   directly on the cream page at the published measure. */
.editor-canvas__body {
  font-family: var(--font-serif); font-size: 2rem; line-height: 1.55;
  letter-spacing: -.01em; color: var(--w-ink);
}
.editor-canvas__body lexxy-editor {
  display: block; min-height: 46vh;
  --lexxy-color-canvas: transparent;
  --lexxy-color-ink: var(--w-ink);
  --lexxy-color-link: var(--accent-color);
  --lexxy-color-accent-dark: var(--accent-color);
  --lexxy-color-selected: rgba(180, 83, 9, .13);
  --lexxy-editor-padding: 0;
  border: 0; border-radius: 0; background: none;
}

/* ---- Overlays: shared scrim, settings slide-over, publish popover ---- */
.editor-shell__scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(20, 18, 14, .3);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.editor-shell__scrim.is-open { opacity: 1; visibility: visible; }

.settings-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(42rem, 94vw);
  display: flex; flex-direction: column; background: var(--w-panel);
  box-shadow: -14px 0 44px rgba(0, 0, 0, .14); visibility: hidden;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility .26s;
}
.settings-panel.is-open { transform: translateX(0); visibility: visible; }
.settings-panel__head, .publish-popover__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 2rem; border-bottom: 1px solid var(--w-line); flex-shrink: 0;
}
.settings-panel__head h2 { font-family: var(--font-sans); font-size: 1.6rem; font-weight: 600; }
.settings-panel__body { flex: 1; overflow-y: auto; padding: 2rem; display: flex; flex-direction: column; gap: 1.7rem; }
.settings-panel__rule { border: 0; border-top: 1px solid var(--w-line); margin: .2rem 0; }

.panel-close { display: inline-flex; padding: .6rem; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--w-muted); }
.panel-close:hover { background: rgba(0, 0, 0, .06); color: var(--w-ink); }

.publish-popover {
  position: fixed; top: 6.8rem; right: max(3vmin, 14px); z-index: 50; width: min(36rem, 94vw);
  background: var(--w-panel); border: 1px solid var(--w-line); border-radius: var(--w-radius);
  box-shadow: var(--w-shadow); visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.publish-popover.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
.publish-popover__head { padding: 1.2rem 1.6rem; }
.publish-popover__head h2 { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; }
.publish-popover__body { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.3rem; }
.publish-state { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: 1.4rem; color: var(--w-muted); }
.publish-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.schedule-form { display: flex; flex-direction: column; gap: .9rem; }

/* ---- Tags (existing checkboxes + the deliberate mint control) ---- */
.tag-checkboxes { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag-choice {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: 1.35rem; font-weight: 500; color: var(--w-ink);
  background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 20px; padding: .4rem .9rem;
}
.tag-choice:hover { border-color: var(--w-line-strong); }
.tag-choice:has(:checked) { color: var(--w-accent-ink); background: rgba(180, 83, 9, .1); border-color: rgba(180, 83, 9, .4); }
.tag-choice input { accent-color: var(--w-accent); }
.tag-mint { display: flex; gap: .6rem; margin-top: .8rem; }
.tag-mint__input { flex: 1; }

.feature-image-preview { margin-top: .8rem; max-width: 100%; border-radius: 8px; border: 1px solid var(--w-line); }

/* =========================================================================
   Form page (tag editor) + auth card
   ========================================================================= */
.form-page__head { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.form-page__head h1 { font-family: var(--font-serif); font-size: 3.2rem; font-weight: 600; margin-right: auto; }
.stacked-form {
  display: flex; flex-direction: column; gap: 1.8rem; padding: 2.6rem;
  background: var(--w-panel); border: 1px solid var(--w-line);
  border-radius: var(--w-radius); box-shadow: var(--w-shadow);
}
.stacked-form small { display: block; }

.auth { display: flex; align-items: center; justify-content: center; min-height: 56vh; padding: 6rem 20px; }
.auth__card {
  width: 100%; max-width: 40rem; padding: 3.4rem;
  background: var(--w-panel); border: 1px solid var(--w-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 40px rgba(0, 0, 0, .09);
}
.auth__card h1 { font-family: var(--font-serif); font-size: 3.2rem; font-weight: 600; }
.auth__sub { color: var(--w-muted); font-size: 1.45rem; margin: .4rem 0 2.4rem; }
.auth__error { background: #fdecef; border: 1px solid rgba(176, 0, 32, .25); color: var(--w-danger); padding: .9rem 1.2rem; border-radius: 8px; font-size: 1.35rem; margin-bottom: 1.6rem; }
.auth .stacked-form { background: none; border: 0; padding: 0; box-shadow: none; gap: 1.6rem; }
.oauth-consent { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.4rem; }
.oauth-consent .w-inline { display: block; margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .settings-panel { width: 100vw; }
  .publish-popover { left: max(3vmin, 14px); right: max(3vmin, 14px); width: auto; }
  .editor-canvas { padding-top: 3rem; }
  .dash-row { align-items: flex-start; }
}