:root {
  --paper:        #f5f1ea;
  --paper-deep:   #ebe5db;
  --ink:          #1a1714;
  --ink-soft:     #4a443d;
  --ink-faint:    #8a8278;
  --rule:         #d9d2c4;
  --accent:       #b8421f;
  --accent-soft:  #d97757;

  --serif: "Source Serif 4", "Lora", Georgia, serif;
  --sans:  Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #16140f;
    --paper-deep:   #1f1c16;
    --ink:          #f0ebe1;
    --ink-soft:     #c2bcaf;
    --ink-faint:    #807b71;
    --rule:         #2a2620;
    --accent:       #e36b46;
    --accent-soft:  #d97757;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem 1.5rem;
}
.wordmark {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  letter-spacing: -0.02em; border: 0;
}
.wordmark .dot { color: var(--accent); }
.primary-nav { display: flex; gap: 1.25rem; flex: 1; }
.primary-nav a {
  font-size: 0.95rem; border: 0;
}
.lang-switcher { display: flex; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem; align-items: center; }
.lang-switcher .lang-current { color: var(--ink-faint); }
.lang-switcher a { border: 0; }
.admin-indicator {
  display: inline-block; width: 8px; height: 8px;
  margin-left: 0.5rem;
  background: var(--accent); border-radius: 50%;
  border: 0; line-height: 0;
}
.admin-indicator:hover { background: var(--accent-soft); }

/* ---------- type ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 1rem 0;
}
.dot-pulse {
  display: inline-block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  margin-right: 0.6em; vertical-align: 1px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

.display-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem 0;
}
.display-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}
.display-headline.centered { text-align: center; }

.section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.015em; margin: 0 0 1.5rem 0;
}

.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--measure); }
.lede.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- layout ---------- */
.hero { padding: 6rem 1.5rem 4rem; border-bottom: 1px solid var(--rule); }
.hero-inner { max-width: 1100px; margin: 0 auto; }
.byline-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: 0.92rem; color: var(--ink-soft);
}
@media (max-width: 700px) { .byline-grid { grid-template-columns: 1fr; gap: 0.5rem; } }

.section { padding: 4rem 1.5rem; max-width: 1180px; margin: 0 auto; border-bottom: 1px solid var(--rule); }
.section-head { margin-bottom: 2rem; }
.page-header { padding: 5rem 1.5rem 2rem; max-width: 1180px; margin: 0 auto; }

/* writing */
.writing-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; }
@media (max-width: 880px) { .writing-grid { grid-template-columns: 1fr; gap: 2rem; } }
.writing-feature a { display: block; border: 0; }
.writing-feature h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.015em;
  margin: 0.5rem 0 0.75rem;
}
.writing-feature .excerpt { color: var(--ink-soft); }
.writing-feature .meta { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.writing-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.writing-list li { background: var(--paper); }
.writing-list a:not(.admin-edit) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding: 1rem 1.25rem;
  border: 0;
}
.writing-list a:not(.admin-edit):hover { background: var(--paper-deep); }
.writing-list .meta { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.writing-list .meta-date { grid-column: 1; }
.writing-list .meta-time { grid-column: 2; text-align: right; }
.writing-list .title {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
}
.writing-list .excerpt {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.writing-list.big a:not(.admin-edit) { padding: 1.35rem 1.5rem; }
.writing-list.big .title { font-size: 1.4rem; }

/* work */
.work-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--paper-deep); border: 1px solid var(--rule);
}
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
.work-card { display: block; padding: 2rem; background: var(--paper); border: 0; }
.work-card:hover { background: var(--paper-deep); }
.work-card img { width: 100%; height: auto; margin-bottom: 1.25rem; }
.work-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 0.5rem; }
.work-card .subtitle { color: var(--ink-soft); margin: 0 0 1rem; }
.toolchain { margin-top: 1rem; }
.chip {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem;
  padding: 0.25rem 0.55rem; margin: 0 0.35rem 0.35rem 0;
  background: var(--paper-deep); border: 1px solid var(--rule);
}

/* half-block: a column that takes ~half the section width, anchored to the
   left so the right side appears as deliberate empty space. Used by the
   homepage assessment teaser and about-short sections. */
.half-block { max-width: 560px; margin-left: 0; margin-right: auto; }
@media (max-width: 760px) { .half-block { max-width: none; } }
.half-block .teaser-card,
.half-block .prose { max-width: none; margin: 0; }

/* assessment teaser card */
.teaser-card {
  border: 1px solid var(--rule); padding: 2.5rem; max-width: 760px; margin: 0 auto;
  position: relative;
}
.teaser-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 60px;
  background: var(--accent);
}
.promise-list { font-family: var(--mono); font-size: 0.9rem; padding: 0; list-style: none; margin: 1rem 0 1.5rem; }
.promise-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }

/* buttons */
.button {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.2rem;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  border: 0; border-radius: 2px; cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
  text-decoration: none;
}
.button:hover {
  background: var(--accent); color: var(--paper);
  transform: translateY(-1px);
}
.button.primary { background: var(--accent); }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.button.danger { background: #b03030; color: white; }
.button.small { padding: 0.4rem 0.7rem; font-size: 0.82rem; }

/* prose */
.prose { font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; max-width: var(--measure); margin: 0 auto; }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; margin-top: 2.2rem; }
.prose h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin-top: 1.6rem; }
.prose p { margin: 0 0 1.1em; }
.prose blockquote {
  border-left: 3px solid var(--accent); margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2em;
  color: var(--ink-soft); font-style: italic;
}
.prose code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-deep); padding: 0.05em 0.3em; border-radius: 2px; }
.prose pre { background: var(--paper-deep); padding: 1rem 1.2rem; overflow-x: auto; border: 1px solid var(--rule); font-size: 0.85em; }
.prose pre code { background: transparent; padding: 0; }
.prose img { max-width: 100%; height: auto; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

.dropcap p:first-of-type::first-letter {
  font-family: var(--serif); float: left; font-size: 4.6rem; line-height: 0.85;
  padding: 0.4rem 0.6rem 0 0; color: var(--accent); font-weight: 500;
}

/* post header */
.post { padding: 4rem 1.5rem; max-width: 760px; margin: 0 auto; }
.post-header { margin-bottom: 2.5rem; }
.post-header .subtitle {
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 1.25rem; margin: -0.5rem 0 1.5rem;
}
.byline-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.byline-strip a { border: 0; color: var(--accent); }
.post-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.tags .label { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); margin-right: 0.5em; }

.related { padding: 3rem 1.5rem 5rem; max-width: 760px; margin: 0 auto; }
.post-hero-image { margin: 2rem 0 2.5rem; }
/* Display the image at its natural size, capped at the container width.
   A 700px image stays 700px wide; a 2000px image shrinks to the container. */
.post-hero-image img { max-width: 100%; width: auto; height: auto; display: block; }

/* ---------- admin edit affordances (visible only when is_admin=true) ---------- */
/* `a.admin-edit` (specificity 0,1,1) wins ties against rules like
 * `.writing-list a` that would otherwise impose padding/grid layout. */
a.admin-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  font-size: 0.85rem; line-height: 1;
  color: var(--paper); background: var(--accent);
  border: 0; border-radius: 50%;
  text-decoration: none; opacity: 0.85;
  box-shadow: 0 0 0 2px var(--paper);
  transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
a.admin-edit:hover {
  opacity: 1; color: var(--paper); transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--paper), 0 2px 6px rgba(0,0,0,0.25);
}

.admin-edit-float { float: right; margin: 0.2rem 0 0 1rem; }

.has-admin-edit { position: relative; }
.admin-edit-row {
  position: absolute; top: 0.5rem; right: 0.6rem; z-index: 2;
}
.writing-list li.has-admin-edit > a { padding-right: 2.6rem; }

.admin-edit-card {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
}
.work-card-wrap { position: relative; }
.writing-feature.has-admin-edit { position: relative; }

/* case study — same container shape as .post so kicker, title, subtitle,
   body, and hero image all share the same left edge of the container.
   Prose keeps its readable measure but anchors left instead of centering. */
.case-study { padding: 4rem 1.5rem; max-width: 760px; margin: 0 auto; }
.case-study .prose { margin: 0; }
.case-study .post-hero-image { margin: 2rem 0 2.5rem; }
.case-study .cover { margin: 2rem 0; }
.case-study .cover img { max-width: 100%; width: auto; max-height: 60vh; object-fit: cover; }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 3rem auto; max-width: 900px; }
@media (max-width: 700px) { .case-gallery { grid-template-columns: 1fr; } }
.case-gallery figcaption { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.4rem; }
.status-pill { font-family: var(--mono); font-size: 0.7rem; padding: 0.15rem 0.5rem; background: var(--paper-deep); }

/* assessment page */
.bullets { padding-left: 1.2em; }
.bullets li { margin-bottom: 0.6em; }
.targets { margin: 1.5rem 0; }
.targets dt { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-top: 1.2em; }
.targets dd { margin: 0.3em 0 0; color: var(--ink-soft); }
.price-card { border: 1px solid var(--rule); padding: 2rem; max-width: 600px; }
.price-card .price-figure { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.5rem; }
.price-card .amount { font-family: var(--serif); font-size: 2.5rem; font-weight: 600; color: var(--accent); }
.price-card .currency { font-family: var(--mono); font-size: 0.9rem; color: var(--ink-faint); }
.price-card .label { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); margin: 1rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.12em; }

/* contact */
.contact-form { display: grid; gap: 1.2rem; max-width: 540px; }
.contact-form label { display: grid; gap: 0.4rem; font-size: 0.88rem; color: var(--ink-soft); }
.contact-form input, .contact-form textarea {
  font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); border-radius: 2px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.form-thanks {
  padding: 1rem 1.2rem; border-left: 3px solid var(--accent);
  background: var(--paper-deep); font-family: var(--serif); font-size: 1.05rem;
}

/* about — share the 1180px masthead container so title and body anchor to
   the same left edge as the wordmark. */
.about-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 4rem;
  max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 5rem;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } }
.about-grid .prose { max-width: none; margin: 0; }
.colophon dl { margin: 0; font-size: 0.92rem; }
.colophon dt { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 1.2rem; }
.colophon dd { margin: 0.2rem 0 0; }

/* footer */
.site-footer { border-top: 1px solid var(--rule); margin-top: 4rem; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.5rem;
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem;
  font-size: 0.85rem; color: var(--ink-faint);
}
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 1rem; } }
.footer-nav { display: flex; gap: 1.2rem; justify-content: flex-end; }
.footer-nav a { border: 0; }
.footer-meta { font-family: var(--mono); font-size: 0.78rem; }

/* misc */
.empty { color: var(--ink-faint); font-style: italic; }
.contact-cta { padding: 5rem 1.5rem; max-width: 800px; margin: 0 auto; text-align: center; }
.contact-cta .centered { text-align: center; }
.about-short .prose { padding-top: 1rem; }
.assessment-form-section .contact-form { margin-top: 1.5rem; }

/* legal pages — share the masthead's 1180px container so title and prose
   anchor to the same left edge as the wordmark. Prose keeps its readable
   measure (68ch) inside that container, with the right side intentionally
   empty. */
.legal-page { padding: 4rem 1.5rem 5rem; max-width: 1180px; margin: 0 auto; }
.legal-page .page-header { padding: 0; max-width: none; margin: 0 0 2rem; }
.legal-page .prose { max-width: var(--measure); margin: 0; }