/* Template-specific styles for Ghost theme — layered on top of styles.css.
 * Anything that was page-scoped in the static prototypes lives here. */

/* ───── Hero (home) ───── */
.hero { padding: 80px 0 60px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,0.95fr); gap: 80px; align-items: start; border-bottom: 1px solid var(--rule-soft); }
.hero .left .eyebrow { margin-bottom: 28px; display: flex; align-items: center; gap: 14px; }
.hero .left .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--ink-4); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px,5.6vw,78px); line-height: .96; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--ink-2); }
.hero .lede { margin-top: 32px; max-width: 52ch; font-size: 19px; color: var(--ink-2); line-height: 1.55; }
.hero .lede + .lede { margin-top: 18px; color: var(--ink-3); }
.meta-strip { margin-top: 44px; display: flex; gap: 32px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.meta-strip b { color: var(--ink); font-weight: 500; }
.meta-strip span { display: flex; flex-direction: column; gap: 4px; }

.hero .right { position: relative; border: 1px solid var(--rule-soft); background: var(--canvas-2); padding: 28px 28px 24px; border-radius: 2px; }
.hero .right .corners::before, .hero .right .corners::after, .hero .right .corners > i::before, .hero .right .corners > i::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--ink-3); pointer-events: none; }
.hero .right .corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero .right .corners::after  { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hero .right .corners > i::before { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hero .right .corners > i::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.lattice-cap { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.lattice-cap b { color: var(--ink); font-weight: 500; }
.lattice-foot { margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: .05em; display: flex; justify-content: space-between; }
.lattice-legend { display: flex; gap: 14px; align-items: center; }
.lattice-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.lattice-legend .sw.fill { background: var(--accent); }
.lattice-legend .sw.ring { background: transparent; border: 1px solid var(--ink-2); }

/* ───── Index sections + entries ───── */
.index-section { padding: 64px 0 0; }
.section-head { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: 6px; }
.section-head .label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.section-head .label .num { color: var(--accent); margin-right: 8px; font-weight: 500; }
.section-head .head-cols { display: grid; grid-template-columns: 80px 1fr 90px 80px; gap: 24px; color: var(--ink-4); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }

.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; border-bottom: 1px solid var(--rule-soft); padding: 22px 0; transition: background .2s var(--ease); position: relative; }
.entry .entry-link { position: absolute; inset: 0; z-index: 1; }
.entry > * { position: relative; z-index: 0; }
.entry:hover { background: color-mix(in oklab, var(--canvas-2) 80%, transparent); }
.entry .entry-link:hover ~ .body .title { color: var(--accent); }
.entry .stamp { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; line-height: 1.4; }
.entry .stamp .date { color: var(--ink-2); }
.entry .stamp .num { color: var(--ink-4); margin-bottom: 6px; display: block; }
.entry .body { display: grid; grid-template-columns: 80px 1fr 90px 80px; gap: 24px; align-items: baseline; }
.entry .form { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; padding-top: 8px; }
.entry .title-block .title { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.018em; line-height: 1.15; color: var(--ink); margin: 0 0 6px; }
.entry .title-block .dek { color: var(--ink-3); font-size: 16px; line-height: 1.5; max-width: 60ch; }
.entry .phi-col, .entry .read-col { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.entry .arrow { grid-column: 1 / -1; justify-self: end; font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-top: 4px; transition: transform .2s var(--ease), color .2s; }
.entry:hover .arrow { transform: translateX(6px); color: var(--accent); }

/* Pagination */
.pagination { padding: 40px 0 80px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.pagination span.page { color: var(--ink-4); }
.pagination .older-posts, .pagination .newer-posts { color: var(--ink); }
.pagination .older-posts:hover, .pagination .newer-posts:hover { color: var(--accent); }
.pagination .page-number { color: var(--ink-4); }

/* ───── Archive page (index.hbs) ───── */
.archive-head { padding: 80px 0 48px; display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: end; border-bottom: 1px solid var(--rule-soft); }
.archive-head .label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.archive-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px,4.6vw,64px); line-height: 1; letter-spacing: -.022em; margin: 0; }
.archive-head h1 em { font-style: italic; color: var(--ink-3); }
.archive-head .stats { margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; display: flex; gap: 28px; }
.archive-head .stats b { color: var(--ink); font-weight: 500; }

.filters { display: grid; grid-template-columns: 220px 1fr; gap: 60px; padding: 24px 0; border-bottom: 1px solid var(--rule-soft); align-items: center; }
.filters .label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .15s var(--ease); text-decoration: none; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.year-group { padding: 56px 0 0; }
.year-head { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.year-head .year { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase; }
.year-head .year b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-size: 32px; letter-spacing: -.01em; display: block; }
.year-head .year-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: .06em; display: flex; justify-content: space-between; }

ul.entries-archive { list-style: none; margin: 0; padding: 0; }
li.row { display: grid; grid-template-columns: 220px 1fr; gap: 60px; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); transition: background .15s var(--ease); position: relative; }
li.row .entry-link { position: absolute; inset: 0; z-index: 1; }
li.row > * { position: relative; z-index: 0; }
li.row:hover { background: color-mix(in oklab, var(--canvas-2) 80%, transparent); }
li.row:hover .title { color: var(--accent); }
li.row .stamp { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; display: flex; flex-direction: column; gap: 4px; }
li.row .stamp .num { color: var(--ink-4); }
li.row .stamp .date { color: var(--ink-2); }
li.row .stamp .form-tag { margin-top: 4px; width: fit-content; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-3); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
li.row .stamp .form-tag.essay { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, var(--rule)); }
li.row .body { display: grid; grid-template-columns: 1fr 90px 80px; gap: 24px; align-items: baseline; }
li.row .title-block .title { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: -.018em; line-height: 1.18; margin: 0 0 4px; color: var(--ink); }
li.row .title-block .dek { color: var(--ink-3); font-size: 15px; line-height: 1.5; max-width: 64ch; }
li.row .phi-col, li.row .read-col { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 6px; text-align: right; }

/* ───── Post page ───── */
.essay-shell { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.essay-grid { display: grid; grid-template-columns: 220px minmax(0,640px) 220px; gap: 60px; margin: 0 auto; padding: 60px 0; justify-content: center; }
.meta-rail { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.meta-rail .block { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.meta-rail .block:first-child { padding-top: 0; }
.meta-rail .k { color: var(--ink-4); font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 6px; }
.meta-rail .v { color: var(--ink); }

.essay-title { grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(0,640px) 220px; gap: 60px; border-bottom: 1px solid var(--rule); padding-bottom: 48px; margin-bottom: 48px; align-items: end; }
.essay-title .head { grid-column: 2; }
.essay-title .eyebrow-row { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 28px; }
.essay-title .eyebrow-row .acc { color: var(--accent); }
.essay-title h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px,4.8vw,60px); line-height: 1.02; letter-spacing: -.022em; text-wrap: balance; margin: 0 0 22px; }
.essay-title h1 em { font-style: italic; color: var(--ink-2); }
.essay-title .subtitle { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--ink-3); max-width: 30ch; }

.author-line { grid-column: 2; margin-top: 44px; display: flex; gap: 32px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; flex-wrap: wrap; }
.author-line .name { color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: 0; }
.author-line .sep { color: var(--ink-4); }
.author-line b { color: var(--ink-2); font-weight: 500; }

.body-col { grid-column: 2; font-family: var(--serif); font-size: 19px; line-height: 1.65; color: var(--ink); }
.body-col p { margin: 0 0 1.1em; text-wrap: pretty; }
.body-col > p:first-of-type::first-letter { font-family: var(--serif); font-size: 5em; float: left; line-height: .85; padding: .06em .12em 0 0; color: var(--ink); font-weight: 400; }
.body-col h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.18; letter-spacing: -.018em; margin: 60px 0 18px; color: var(--ink); }
.body-col h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; margin: 36px 0 12px; color: var(--ink-2); }
.body-col blockquote { margin: 28px 0; padding: 4px 0 4px 28px; border-left: 1px solid var(--accent); font-style: italic; color: var(--ink-2); font-size: 21px; line-height: 1.45; }
.body-col code { font-family: var(--mono); font-size: .86em; color: var(--accent); padding: 1px 4px; background: var(--accent-soft); border-radius: 3px; }
.body-col img { display: block; max-width: 100%; margin: 32px auto; border-radius: 2px; }
.body-col figure { margin: 32px 0; }
.body-col figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 10px; letter-spacing: .04em; }
.body-col hr { border: 0; border-top: 1px solid var(--rule); margin: 40px auto; width: 60%; }

/* Koenig editor card widths — required by Ghost gscan */
.body-col .kg-width-wide,
.post-content .kg-width-wide {
  position: relative;
  width: calc(100% + 200px);
  margin-left: -100px;
  margin-right: -100px;
  max-width: 100vw;
}
.body-col .kg-width-full,
.post-content .kg-width-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.body-col .kg-width-wide img,
.body-col .kg-width-full img,
.post-content .kg-width-wide img,
.post-content .kg-width-full img { width: 100%; display: block; }

/* Koenig card supporting styles */
.kg-image-card { margin: 32px 0; }
.kg-image-card figcaption,
.body-col figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 10px; letter-spacing: .04em; }
.kg-embed-card { margin: 32px 0; }
.kg-gallery-card { margin: 32px 0; }
.kg-bookmark-card { margin: 32px 0; padding: 20px; border: 1px solid var(--rule); border-radius: 2px; background: var(--canvas-2); }
.kg-bookmark-title { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.kg-bookmark-description { color: var(--ink-3); font-size: 14px; line-height: 1.5; }

.post-foot { grid-column: 2; margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; gap: 24px; }
.post-foot .tags a { color: var(--ink-3); margin-right: 12px; }
.post-foot .tags a:hover { color: var(--accent); }

@media (max-width: 1080px) {
  .essay-grid, .essay-title { grid-template-columns: minmax(0,720px); }
  .essay-grid > .meta-rail { display: none; }
  .essay-title .head, .author-line, .body-col, .post-foot { grid-column: 1; }
}
@media (max-width: 980px) {
  .hero, .section-head, .entry, .archive-head, .filters, .year-head, li.row { grid-template-columns: 1fr; gap: 24px; }
  .entry .body, li.row .body { grid-template-columns: 1fr; }
}