@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&display=swap');

/* Shared footer: three distinct, accessible destinations in reading order. */
.site-footer { width:100%; max-width:1280px; margin:3rem auto 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; padding:1rem 0; }
.site-footer .rights { position:relative; inset:auto; transform:none; margin:0; grid-column:2; grid-row:1; max-width:100%; white-space:normal; text-align:center; }
.site-footer .archetypes { position:relative; inset:auto; padding:0; margin:0; grid-column:3; grid-row:1; justify-self:end; pointer-events:auto; }
.site-footer .egg-wrap { position:relative; inset:auto; margin:0; grid-column:1; grid-row:1; justify-self:start; }
.site-footer .archetypes-row { gap:12px; align-items:center; }
.site-footer .archetype-card, .site-footer .archetype-card:hover { width:58px; height:58px; margin:0; transform:none; display:grid; place-items:center; }
.site-footer .archetype-card:hover, .site-footer .archetype-card:focus-visible { transform:translateY(-3px); }
.site-footer .archetype-card:focus-visible { outline:1px solid currentColor; outline-offset:4px; border-radius:50%; }
.site-footer .archetype-img { width:100%; height:100%; object-fit:contain; animation:none; filter:drop-shadow(0 3px 5px #0002); }
.site-footer .archetype-label { font-size:10px; }
body { flex-direction:column; }
body[data-archetype="logic"] .essay-title, .tl-entry--logic .tl-title { color:var(--logic); }
body[data-archetype="psyche"] .essay-title, .tl-entry--psyche .tl-title { color:var(--psyche); }
body[data-archetype="instinct"] .essay-title, .tl-entry--instinct .tl-title { color:var(--instinct); }
.essay-title-row { display:block; }
.essay-title { text-wrap:balance; }
.essay-meta { line-height:1.8; }
.essay-body, .fn-content { overflow-wrap:break-word; }
.essay-body a, .fn-content a { overflow-wrap:anywhere; }
.tl-date { display:flex; flex-direction:column; gap:3px; line-height:1.45; letter-spacing:.06em; }
.tl-date span { font-size:.5rem; opacity:.8; }
.tl-date span:not(:first-child) { margin-top:10px; }
.tl-date time { font-size:.6rem; letter-spacing:.02em; }

/* The homepage uses intrinsic flow; viewport height never hides content. */
html:has(body.home), html body.home { height:auto; max-height:none; overflow-y:auto; }
body.home { min-height:100svh; display:flex; align-items:stretch; justify-content:center; padding:32px max(32px,env(safe-area-inset-right)) 20px max(32px,env(safe-area-inset-left)); }
.home .page { width:100%; max-width:948px; margin:0 auto; max-height:none; transform:none; }
.home .home-panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; transform:none; }
.home .frame, .home .featured { width:100%; max-width:none; min-width:0; margin:0; transform:none; }
.home .frame { grid-column:1; grid-row:1; }
.home .featured { grid-column:2; grid-row:1; margin-top:150px; }
.home .logo img { display:block; width:136px; height:136px; object-fit:contain; }
.quote-progress-track { display:block; height:2px; width:100%; overflow:hidden; background:var(--ink-12); border-radius:2px; }
.quote-progress-fill { display:block; width:100%; height:100%; background:var(--logic-gold); transform:scaleX(0); transform-origin:left; opacity:.8; }
.quote-progress[aria-pressed="true"] .quote-progress-fill { opacity:.4; }
.home .featured-title { font-size:1.25rem; color:var(--logic-gold); }
.home .featured-dot { display:none; }
.home .featured-all { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:24px; padding:12px 18px; border:1px solid var(--border-50); background:var(--ink-06); color:var(--ink); font-size:.65rem; letter-spacing:.16em; }
.home .featured-all:hover { transform:none; background:var(--ink-12); border-color:var(--border); }
.home .home-link { display:block; }
.home .home-link-line { stroke:var(--ink-25); stroke-dasharray:2 5; }
.home-invitation { position:absolute; z-index:2; width:220px; max-width:100%; right:0; top:44px; font-family:'Caveat',cursive; font-size:19px; font-weight:400; line-height:1.15; color:var(--ink-50); text-align:center; text-decoration:none; transform:rotate(-3deg); background:var(--bg); padding:8px; }
.home-invitation span { display:block; }
.home-invitation:hover { color:var(--logic-gold); }
.home .site-footer { margin-top:44px; }
@media(max-width:1009px) {
 .home .page { max-width:460px; }
 .home .home-panels { grid-template-columns:minmax(0,1fr); gap:0; }
 .home .frame { grid-column:1; grid-row:1; }
 .home .featured { grid-column:1; grid-row:3; margin-top:0; }
 .home-invitation { position:relative; grid-column:1; grid-row:2; inset:auto; margin:26px auto; width:220px; font-size:19px; }
 .home .site-footer { max-width:460px; }
 .site-footer { grid-template-columns:1fr 1fr; gap:24px 12px; }
 .site-footer .rights { grid-column:1 / -1; grid-row:2; justify-self:center; }
 .site-footer .egg-wrap { grid-column:1; grid-row:1; }
 .site-footer .archetypes { grid-column:2; grid-row:1; }
}
@media(max-width:480px) {
 body.home { padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left)); }
 .home .logo img { width:clamp(54px,9.5vh,86px); height:clamp(54px,9.5vh,86px); }
 .home .featured-foot { flex-wrap:wrap; gap:14px; }
 .home .featured-meta { flex-wrap:wrap; gap:8px; }
 .site-footer .archetypes-row { gap:4px; }
 .site-footer .archetype-card, .site-footer .archetype-card:hover { width:48px; height:48px; }
 .site-footer .rights { font-size:.5rem; line-height:1.8; }
 .tl-spine { width:74px; min-width:74px; }
 .tl-date time { font-size:.52rem; }
 .tl-date span { font-size:.44rem; }
 .tl-title { overflow-wrap:break-word; }
 body[data-essay-id] .essay-home-mark { position:absolute; }
}
@media(prefers-reduced-motion:reduce) {
 .home .quotes-carousel, .quote-slide { transition:none; }
 .site-footer .archetype-card { transition:none; }
}

/* Keep connector dimensions bounded during a responsive relayout. */
.essay-wires { width:100%; height:100%; }


/* A compact fan, with the original destinations and left-to-right order. */
.site-footer { grid-template-columns:1fr auto; max-width:1080px; padding-bottom:12px; }
.site-footer .egg-wrap[hidden] { display:none; }
.site-footer .rights { grid-column:1; justify-self:start; }
.site-footer .archetypes { grid-column:2; padding:14px 12px 8px; }
.site-footer .archetypes-row { gap:0; isolation:isolate; }
.site-footer .archetype-card, .site-footer .archetype-card:hover { width:64px; height:64px; margin:0 0 0 -24px; transform-origin:50% 80%; transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s; }
.site-footer .archetype-instinct { margin-left:0; transform:translateY(5px) rotate(-15deg); z-index:1; }
.site-footer .archetype-logic { transform:translateY(-2px); z-index:2; }
.site-footer .archetype-psyche { transform:translateY(5px) rotate(15deg); z-index:3; }
@media(hover:hover) {
 .site-footer .archetypes-row:hover .archetype-instinct { transform:translate(-9px,2px) rotate(-21deg); }
 .site-footer .archetypes-row:hover .archetype-psyche { transform:translate(9px,2px) rotate(21deg); }
 .site-footer .archetypes-row .archetype-card:hover { transform:translateY(-13px) rotate(0) scale(1.12); z-index:5; filter:drop-shadow(0 7px 8px #0002); }
}
.site-footer .archetype-card:focus-visible { transform:translateY(-13px) scale(1.1); z-index:5; }
.home .featured-title-row { display:block; }
.home-invitation { -webkit-font-smoothing:antialiased; }

/* Paired dates share a quiet frame and a single dividing rule. */
.essay-dates, .tl-date { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border-25); background:var(--bg-raised); font-family:var(--font-mono); }
.essay-dates { width:fit-content; max-width:100%; margin:1.25rem auto 0; text-transform:uppercase; }
.date-item { display:flex; flex-direction:column; gap:6px; padding:10px 14px; min-width:0; }
.date-item + .date-item { border-left:1px dotted var(--border-50); }
.date-item span { font-size:8px; letter-spacing:.1em; color:var(--ink-50); }
.date-item time { font-size:10px; line-height:1.5; letter-spacing:.025em; color:var(--ink-80); }
.tl-entry { grid-template-columns:148px minmax(0,1fr); gap:24px; }
.tl-spine { padding-right:20px; }
.tl-date { grid-template-columns:1fr; margin-top:14px; text-align:left; position:relative; }
.tl-date:after { content:''; position:absolute; top:18px; left:100%; width:20px; border-top:1px dotted var(--border-50); }
.tl-date .date-item { padding:10px; }
.tl-date .date-item + .date-item { border-left:0; border-top:1px dotted var(--border-50); }
.tl-date span:not(:first-child) { margin-top:0; }
.tl-date time { font-size:10px; }
.index-head { display:grid; grid-template-columns:1fr auto; align-items:end; text-align:left; padding:0 0 24px; margin-bottom:32px; border-bottom:1px solid var(--border-25); }
.index-head .hc { display:none; }
.archive-eyebrow { grid-column:1 / -1; margin-bottom:10px; font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:var(--ink-50); }
.index-head .essay-title { font-size:2.8rem; font-style:normal; line-height:1; margin:0; }
.archive-count { font-family:var(--font-mono); font-size:10px; color:var(--ink-50); letter-spacing:.1em; padding-bottom:5px; }

/* Native cursors remain precise; feedback belongs to the target itself. */
.reading-light { display:none; }
a, button { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible { outline:1px solid var(--ink-50); outline-offset:5px; }
.essay-body { cursor:text; }
.essay-body a, .fn-content a, .fn-marker { cursor:pointer; transition:color .2s,text-decoration-color .2s; }
.fn-content a:hover, .essay-body a:hover { text-decoration-color:var(--ink); }

/* Shape plus brand color: square logic, circle psyche, triangle instinct. */
[data-archetype="logic"] { --note-accent:var(--logic); --note-shape:polygon(0 0,100% 0,100% 100%,0 100%); }
[data-archetype="psyche"] { --note-accent:var(--psyche); --note-shape:circle(50%); }
[data-archetype="instinct"] { --note-accent:var(--instinct); --note-shape:polygon(50% 0,100% 100%,0 100%); }
.fnref { font-size:.58em; top:-.12em; padding:0 .2em; }
.fnref a, .fnref:hover a, .fnref:focus-within a, .fnref.linked a { background:transparent; border-radius:0; color:var(--ink-80); padding:3px 2px; text-decoration:none; }
.fnref a::before { content:''; display:inline-block; width:4px; height:4px; margin:0 4px 1px 0; background:var(--note-accent); clip-path:var(--note-shape); }
.fnref:hover a, .fnref.linked a { text-decoration:underline; text-decoration-color:var(--note-accent); text-underline-offset:4px; }
.essay-notes { border-left:1px dotted var(--border-50); padding-left:24px; }
.footnote { font-family:var(--font-mono); font-size:11px; line-height:1.85; grid-template-columns:30px minmax(0,1fr); column-gap:10px; margin-left:0; padding:4px 0 4px 24px; border-left:0; color:var(--ink-80); }
.fn-content p { margin:0 0 1em; }
.fn-content p:last-of-type { margin-bottom:0; }
.footnote em { color:inherit; }
.footnote[data-archetype] .fn-marker::before { width:7px; height:7px; opacity:1; border-radius:0; clip-path:var(--note-shape); background:var(--note-accent); margin-right:8px; }
.fn-marker { font-size:10px; color:var(--ink-80); line-height:1.85; padding-top:0; }
.footnote.linked, .footnote:target { border-left:0; }
.note-key { display:flex; flex-wrap:wrap; gap:12px; font-family:var(--font-mono); font-size:9px; line-height:1.5; color:var(--ink-50); }
.note-key span::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; clip-path:var(--note-shape); background:var(--note-accent); }
.essay-wires .wire-path { stroke:var(--ink-25); stroke-width:.7; }
body[data-essay-id], body.essays-index { padding-bottom:2rem; }
@media(max-width:1024px) {
 .essay-notes { border-left:0; border-top:1px dotted var(--border-50); padding-left:0; }
 .footnote { padding-left:0; margin:0 0 24px; }
 .note-key { margin-bottom:24px; }
}
@media(max-width:1009px) {
 .site-footer { grid-template-columns:1fr auto; gap:16px; }
 .site-footer .rights { grid-column:1; grid-row:1; }
 .site-footer .archetypes { grid-column:2; grid-row:1; }
}
@media(max-width:600px) {
 .tl-entry { grid-template-columns:minmax(0,1fr); gap:0; padding-left:18px; border-left:1px solid var(--border-30); }
 .tl-spine { width:auto; min-width:0; padding:0 0 14px; text-align:left; }
 .tl-line { display:none; }
 .tl-node { left:-23px; right:auto; top:3px; }
 .tl-no { font-size:10px; }
 .tl-date { grid-template-columns:1fr 1fr; margin-top:10px; }
 .tl-date .date-item + .date-item { border-top:0; border-left:1px dotted var(--border-50); }
 .tl-date:after { display:none; }
 .tl-date .date-item { padding:9px; }
 .tl-date .date-item span { font-size:8px; }
 .tl-date .date-item time { font-size:9px; }
 .tl-card { padding-bottom:32px; }
 .index-head .essay-title { font-size:2.35rem; }
 .essay-dates .date-item { padding:9px; }
 .essay-dates .date-item time { font-size:9px; }
 .site-footer .rights { font-size:8px; max-width:200px; }
 .site-footer .archetype-card, .site-footer .archetype-card:hover { width:56px; height:56px; }
}
@media(prefers-reduced-motion:reduce) {
 .site-footer .archetype-card, .fnref a, .fn-content a { transition:none; }
}
.index-head { width:100%; max-width:none; margin-left:0; margin-right:0; column-gap:24px; }
.site-footer .archetype-instinct, .site-footer .archetype-instinct:hover { margin-left:0; }
.fnref a::before { width:6px; height:6px; }
.site-footer .archetype-card:focus-visible { outline:1px solid var(--border-50); outline-offset:3px; }

/* Breathing room belongs around the composition, not in larger type. */
body.home { padding-top:56px; padding-bottom:max(20px,env(safe-area-inset-bottom)); }
.home .page { max-width:1020px; }
.home .home-panels { column-gap:100px; }
.home .featured { margin-top:190px; }
.home-invitation { top:64px; }
.site-footer, .home .site-footer { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:24px; width:100%; max-width:1020px; margin:auto auto 0; padding:64px 24px 0; }
.site-footer .rights { order:1; flex:0 1 auto; max-width:100%; margin:0; text-align:center; }
.site-footer .archetypes { order:0; flex:0 0 auto; padding:16px; align-items:center; }
body[data-essay-id], body.essays-index { padding-bottom:max(20px,env(safe-area-inset-bottom)); }
@media(max-width:1120px) {
 .home .page { max-width:460px; }
 .home .home-panels { grid-template-columns:minmax(0,1fr); gap:0; }
 .home .frame { grid-column:1; grid-row:1; }
 .home .featured { grid-column:1; grid-row:3; margin-top:0; }
 .home-invitation { position:relative; grid-column:1; grid-row:2; inset:auto; margin:48px auto; }
 .home .site-footer { max-width:600px; }
}
@media(max-width:700px) {
 body.home { padding-top:32px; padding-bottom:max(20px,env(safe-area-inset-bottom)); }
 .site-footer, .home .site-footer { max-width:460px; padding:48px 0 0; gap:24px; }
 .site-footer .archetypes { order:0; }
 .site-footer .rights { order:1; text-align:center; }
 body[data-essay-id], body.essays-index { padding-bottom:max(20px,env(safe-area-inset-bottom)); }
}

/* The signature is one precise, shared glyph in the text and margin. */
.note-symbol { display:block; width:13px; height:13px; fill:var(--note-accent); fill-opacity:0; stroke:var(--note-accent); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; overflow:visible; transition:fill-opacity .22s ease,stroke-width .22s ease,transform .22s ease; }
.fnref { display:inline-block; font-size:0; line-height:0; vertical-align:super; top:0; margin:0 1px 0 2px; padding:0; }
.fnref a, .fnref:hover a, .fnref.linked a, .fnref:focus-within a { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; margin:-4px 0; color:var(--note-accent); text-decoration:none; background:none; }
.fnref a::before, .footnote[data-archetype] .fn-marker::before, .note-key span::before { content:none; display:none; }
.fnref .note-symbol { width:13px; height:13px; }
.fnref a:hover .note-symbol, .fnref.linked .note-symbol, .fnref a:focus-visible .note-symbol, .fn-marker:hover .note-symbol, .fn-marker:focus-visible .note-symbol { fill-opacity:.24; stroke-width:1; transform:none; }
.fnref a:focus-visible, .fn-marker:focus-visible { outline:none; }
.fnref a:focus-visible .note-symbol, .fn-marker:focus-visible .note-symbol { stroke-width:1.5; fill-opacity:.3; }
.essay-layout { grid-template-columns:minmax(0,1fr) 360px; gap:64px; }
.essay-notes { padding-left:0; border-left:0; }
.essay-notes::before { content:''; position:absolute; top:0; bottom:0; left:-32px; width:1px; background:repeating-linear-gradient(to bottom,var(--border-25) 0 1px,transparent 1px 6px); pointer-events:none; }
.footnote { grid-template-columns:20px minmax(0,1fr); gap:16px; padding:8px 0; font-size:11px; line-height:1.9; letter-spacing:-.01em; }
.fn-marker { display:inline-flex; justify-content:center; align-items:center; width:20px; height:22px; padding:0; margin-top:1px; font-size:0; }
.fn-content { max-width:44ch; }
.fn-content strong { font-weight:500; }
.fn-content p { margin-bottom:1.25em; }
.footnote.linked .fn-marker .note-symbol, .footnote:target .fn-marker .note-symbol { fill-opacity:.24; stroke-width:1; }
.note-key { gap:18px; align-items:center; padding:0 0 20px; }
.note-key span { display:inline-flex; align-items:center; gap:7px; }
.note-key .note-symbol { width:10px; height:10px; }
.footnote, .fnref { scroll-margin-top:48px; }
.essay-wires .wire-path { stroke:var(--ink-25); stroke-width:.65; }
@media(max-width:1024px) {
 .essay-layout { display:block; }
 .essay-notes { border-top:0; margin-top:56px; padding-top:32px; }
 .essay-notes::before { top:0; bottom:auto; left:0; width:100%; height:1px; background:repeating-linear-gradient(to right,var(--border-50) 0 1px,transparent 1px 6px); }
 .note-key { margin-bottom:24px; padding-bottom:0; }
 .footnote { margin-bottom:32px; gap:14px; }
 .fn-content { max-width:58ch; }
 .fn-back { display:inline-flex; margin:10px 0 0; padding:4px 8px; }
}
@media(prefers-reduced-motion:reduce) { .note-symbol { transition:none; } }

/* Preserve the original panel interiors. New controls occupy their own small space. */
.home .quote-position { position:relative; display:block; }
.home .quote-nav .quote-progress { position:absolute; top:calc(100% + 4px); left:0; width:100%; height:20px; padding:9px 0; border:0; border-radius:0; background:none; cursor:pointer; }
.home-updated { position:absolute; bottom:-6px; right:22px; margin:0; padding:0 8px; background:var(--bg); font-family:var(--font-mono); font-size:8px; font-weight:400; line-height:12px; letter-spacing:.045em; color:var(--ink-50); }
.home-updated time { margin-left:.55em; white-space:nowrap; }

/* Publication anchors the timeline; revision history is a secondary annotation. */
.tl-date { display:flex; flex-direction:column; gap:7px; margin-top:10px; padding:0; border:0; background:none; text-align:right; letter-spacing:0; }
.tl-date::after { display:none; }
.tl-date .tl-published { font-size:11px; line-height:1.5; color:var(--ink-80); letter-spacing:.025em; }
.tl-date .tl-updated { display:block; margin:0; font-size:8px; line-height:1.6; color:var(--ink-50); letter-spacing:0; opacity:1; white-space:nowrap; }
.tl-date .tl-updated time { font-size:inherit; color:inherit; letter-spacing:inherit; }
@media(max-width:600px) {
 .tl-date { text-align:left; gap:4px; margin-top:7px; }
}

/* The archive heading follows the same reading edge as its essays. */
.essays-index .index-head { display:block; width:auto; max-width:none; margin:0 0 40px 172px; padding:0; border:0; background:none; text-align:left; }
.essays-index .index-head .essay-title { margin:0; font-size:2.6rem; font-weight:400; font-style:italic; line-height:1.15; letter-spacing:-.025em; }
@media(max-width:600px) {
 .essays-index .index-head { margin:0 0 32px 18px; }
 .essays-index .index-head .essay-title { font-size:2.2rem; }
}

/* Listening belongs beside the archive, with the same mark on every title. */
.essays-index .index-head { margin-bottom:24px; }
.reading-listening { margin:0 0 40px 172px; }
.listening-label, .listening-hint { font-family:var(--font-mono); font-weight:400; line-height:1.6; }
.listening-label { margin:0; font-size:10px; color:var(--ink-80); }
.listening-hint { margin:3px 0 16px; font-size:9px; color:var(--ink-50); }
.listening-blobs { display:flex; align-items:start; gap:14px; width:fit-content; }
.listening-blob { display:flex; flex-direction:column; align-items:center; gap:7px; width:58px; text-decoration:none; color:var(--ink-50); font-family:var(--font-mono); font-size:9px; }
.listening-blob-img { display:block; width:54px; height:54px; object-fit:contain; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.listening-blob--instinct img { transform:rotate(-8deg); }
.listening-blob--psyche img { transform:rotate(8deg); }
.listening-blob:hover img, .listening-blob:focus-visible img { transform:translateY(-6px) rotate(0) scale(1.08); }
.listening-blob:hover, .listening-blob:focus-visible { color:var(--ink); }
.tl-title-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tl-title-row .tl-title { margin:0; color:var(--ink); }
.tl-title-blob { width:32px; height:32px; flex:0 0 32px; object-fit:contain; }
body[data-essay-id] .essay-title-row { display:flex; justify-content:center; align-items:center; gap:14px; }
body[data-essay-id] .essay-title { color:var(--ink); margin-bottom:0; }
.essay-vibe-img { animation:none; filter:drop-shadow(0 2px 3px #0002); }
body[data-essay-id] .site-footer, .essays-index .site-footer { padding-top:64px; gap:0; }
@media(max-width:600px) {
 .reading-listening { margin:0 0 32px 18px; }
 body[data-essay-id] .essay-title-row { gap:10px; }
 .essay-vibe-img { width:38px; height:38px; }
 .tl-title-blob { width:28px; height:28px; flex-basis:28px; }
}
@media(prefers-reduced-motion:reduce) { .listening-blob-img, .essay-vibe { transition:none; } }

/* Quiet notes gain presence through interaction, without a category legend. */
.essay-notes::before { display:none; }
.footnote { opacity:.62; padding-bottom:24px; border-bottom:1px solid var(--ink-12); transition:opacity .25s ease; }
.footnote:hover, .footnote:focus-within, .footnote.linked, .footnote:target { opacity:1; }
.footnote:hover .note-symbol, .footnote:focus-within .note-symbol { fill-opacity:.24; }
.home-updated { color:var(--ink-25); }
@media(prefers-reduced-motion:reduce) { .footnote { transition:none; } }

/* Long film and game titles can wrap without clipping on phones. */
.home .attribution-name { max-width:100%; white-space:normal; overflow:visible; }

/* Version is a quiet annotation within the featured card. */
.home .featured-status { background:none; border-color:transparent; color:var(--ink-50); opacity:.72; letter-spacing:.14em; }
.home .featured-status .fsc { display:none; }
.home .featured-status .status-dot { width:3px; height:3px; opacity:.6; }

/* A handwritten invitation keeps the listening links playful and light. */
.listening-label { font-family:'Caveat',cursive; font-size:23px; font-weight:400; line-height:1.2; color:var(--ink-80); transform:rotate(-1deg); transform-origin:left center; -webkit-font-smoothing:antialiased; }
.listening-hint { margin-top:8px; }
.listening-blob span { font-family:'Caveat',cursive; font-size:17px; font-weight:400; line-height:1; }

/* One archive title and a clear date hierarchy, without listening chrome. */
.essays-index .index-head { margin:0 0 48px; padding:0; }
.essays-index .index-head .essay-title { font-size:3.4rem; font-style:normal; font-weight:400; line-height:1; letter-spacing:-.04em; }
.tl-no { font-size:9px; letter-spacing:.08em; color:var(--ink-50); text-transform:none; }
.tl-date { margin-top:8px; gap:6px; text-transform:none; }
.tl-date .tl-published { font-size:12px; color:var(--ink); }
.tl-date .tl-updated { font-size:9px; }
body[data-essay-id] .essay-number { margin-bottom:34px; font-size:10px; line-height:1.4; letter-spacing:.08em; text-transform:none; color:var(--ink-50); }
.essay-dates { display:flex; flex-direction:column; gap:7px; border:0; background:none; margin:20px auto 0; text-transform:none; text-align:center; }
.essay-dates .date-item { display:block; padding:0; border:0; }
.essay-dates .date-item span { font-size:10px; letter-spacing:0; color:var(--ink-50); margin-right:8px; }
.essay-dates .date-item time { font-size:11px; letter-spacing:0; color:var(--ink-80); }
.essay-dates .date-item + .date-item span, .essay-dates .date-item + .date-item time { font-size:9px; color:var(--ink-50); }
.essay-soundtrack { position:relative; display:inline-flex; flex:0 0 46px; width:46px; }
.soundtrack-note { position:absolute; bottom:calc(100% + 5px); left:-9px; width:88px; font-family:'Caveat',cursive; font-size:19px; font-weight:400; line-height:1; color:var(--ink-50); transform:rotate(-9deg); pointer-events:none; }
.soundtrack-note svg { position:absolute; width:28px; height:23px; top:12px; left:-10px; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-15deg); }

/* Small superscript marks sit close to the phrase they qualify. */
.fnref { font-size:.65em; top:-.08em; margin:0 0 0 1px; }
.fnref a, .fnref:hover a, .fnref.linked a, .fnref:focus-within a { width:11px; height:14px; margin:-3px 0; }
.note-symbol { stroke-width:.95; }

/* Homepage labels keep their role without competing with the title. */
.home .featured-all { width:fit-content; min-width:140px; min-height:40px; margin:24px auto 0; padding:10px 20px; background:none; border:1px solid var(--border-25); letter-spacing:.1em; }
.home .featured-all:hover { background:var(--ink-06); border-color:var(--border-50); }
.home .featured-label { opacity:.6; }
.home .featured-title-row { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-start; gap:10px; }
.home .featured-title { margin:0; }
.home .featured-status { padding:4px 7px; opacity:1; color:var(--ink-50); border:1px solid var(--border-25); background:var(--ink-06); font-size:8px; line-height:1.4; letter-spacing:.08em; }
.home .featured-status .status-dot { display:none; }

/* A single field stays at hand; the reading column keeps its full width. */
.reading-subscribe { position:fixed; z-index:30; right:max(24px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); width:260px; max-width:calc(100vw - 32px); padding:10px 12px 8px; background:var(--bg); border:1px solid var(--ink-12); border-radius:3px; box-shadow:0 4px 20px #00000008; }
.reading-subscribe .essay-subscribe { margin:0; text-align:left; }
.reading-subscribe .subscribe-label { margin:0 0 5px; font-size:9px; line-height:1.3; letter-spacing:.025em; text-transform:none; color:var(--ink-50); }
.reading-subscribe .subscribe-row { display:flex; width:100%; border:0; border-bottom:1px solid var(--ink-12); }
.reading-subscribe .subscribe-row:focus-within { border-color:var(--ink-50); }
.reading-subscribe input[type="email"] { width:100%; min-width:0; flex:1; font-size:12px; line-height:1.3; padding:8px 0; }
.reading-subscribe input[type="email"]::placeholder { color:var(--ink-50); }
.reading-subscribe button { flex:0 0 36px; min-height:36px; border:0; padding:0; font-size:18px; color:var(--ink-80); }
.reading-subscribe button:hover { background:var(--ink-06); }
.reading-subscribe .subscribe-status { margin:7px 0 0; font-family:var(--font-mono); font-size:10px; line-height:1.5; color:var(--ink-80); }
.reading-subscribe .subscribe-status.is-error { color:var(--ink); }
.reading-subscribe .is-confirmed button { color:var(--ink-80); background:none; }
@media(max-width:600px) {
 .essays-index .index-head { margin:0 0 36px 18px; }
 .essays-index .index-head .essay-title { font-size:2.8rem; }
 .essay-soundtrack { flex-basis:38px; width:38px; }
 .soundtrack-note { font-size:17px; left:-4px; }
 .reading-subscribe { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); width:252px; }
 .reading-subscribe input[type="email"] { font-size:16px; }
 body[data-essay-id], body.essays-index { padding-bottom:112px; }
}

/* Balance the two original panels around the available window. */
body.home { padding-top:clamp(24px,4vh,56px); }
.home .page { margin:auto; }
.home .site-footer { padding-top:32px; }
@media(min-width:1010px) {
 .home .page { max-width:1020px; }
 .home .home-panels { grid-template-columns:repeat(2,minmax(0,460px)); gap:0 clamp(32px,6vw,100px); align-items:center; justify-content:center; }
 .home .frame { grid-column:1; grid-row:1; }
 .home .featured { grid-column:2; grid-row:1; margin:0; }
 .home-invitation { position:relative; grid-column:1 / -1; grid-row:2; inset:auto; margin:32px auto 18px; width:220px; }
}
@media(max-width:1009px) {
 .home .page { max-width:460px; }
 .home .home-panels { grid-template-columns:minmax(0,1fr); }
 .home .featured { grid-column:1; grid-row:3; margin:0; }
 .home-invitation { grid-column:1; grid-row:2; margin:40px auto; }
}

/* Status belongs to the editing history, separate from publication. */
.home .featured-status { padding:0; border:0; background:none; color:var(--ink-80); opacity:1; font-size:9px; letter-spacing:.04em; text-transform:none; }
.essay-revision { position:absolute; top:18px; right:20px; display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-family:var(--font-mono); }
.essay-revision .frame-status { position:static; inset:auto; transform:none; margin:0; padding:0; border:0; background:none; color:var(--ink-80); font-size:10px; letter-spacing:.04em; }
.essay-revision .sc, .essay-revision .status-dot { display:none; }
.revision-updated { margin:0; font-size:8px; line-height:1.4; color:var(--ink-50); }
body[data-essay-id] .essay-head { margin-top:24px; }
body[data-essay-id] .essay-title-row { padding-top:34px; }
.essay-soundtrack { flex-basis:60px; width:60px; justify-content:center; }
.soundtrack-note { display:flex; flex-direction:column; align-items:center; position:absolute; left:0; bottom:calc(100% + 2px); width:60px; font-size:17px; line-height:1; transform:rotate(-6deg); }
.soundtrack-note svg { position:static; width:26px; height:20px; margin:0; transform:none; }
.fnref { margin-left:3px; }

/* Hover changes light and color, never the geometry of the reading UI. */
.tl-card:hover, .essay-card:hover, .home .featured-card:hover, .essay-nav a.essay-nav-prev:hover, .essay-nav a.essay-nav-next:hover, .essay-vibe:hover, .essay-vibe:focus-visible { transform:none; }
.tl-card:hover .tl-thumb img, .essay-card:hover .essay-card-thumb img, .home .featured-card:hover .featured-thumb img { transform:none; }
.tl-thumb img, .featured-thumb img { transition:filter .35s ease; }
.tl-card:hover .tl-thumb img, .home .featured-card:hover .featured-thumb img { filter:brightness(1.06) saturate(1.04); }
.tl-card:hover .tl-read .arr, .home .featured-card:hover .featured-cta .arr { transform:none; }
.site-footer .archetypes-row .archetype-instinct:hover, .site-footer .archetypes-row:hover .archetype-instinct, .site-footer .archetype-instinct:focus-visible { transform:translateY(5px) rotate(-15deg); }
.site-footer .archetypes-row .archetype-logic:hover, .site-footer .archetype-logic:focus-visible { transform:translateY(-2px); }
.site-footer .archetypes-row .archetype-psyche:hover, .site-footer .archetypes-row:hover .archetype-psyche, .site-footer .archetype-psyche:focus-visible { transform:translateY(5px) rotate(15deg); }
.site-footer .archetype-card:hover .archetype-label { transform:translateX(-50%); }

/* A quiet three-color edge gives the email field a little personality. */
.reading-subscribe { isolation:isolate; border:1px solid transparent; border-radius:13px 13px 5px 13px; background:linear-gradient(var(--bg-raised),var(--bg-raised)) padding-box,linear-gradient(115deg,var(--psyche-blue),var(--instinct-rose) 52%,var(--logic-gold)) border-box; box-shadow:0 4px 22px #0000000a; }
.reading-subscribe::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.13; background:radial-gradient(ellipse at 0 0,var(--psyche-blue),transparent 65%),radial-gradient(ellipse at 100% 100%,var(--logic-gold),transparent 55%),radial-gradient(ellipse at 60% 0,var(--instinct-rose),transparent 60%); }
.reading-subscribe:focus-within::before { opacity:.22; }
.reading-subscribe .subscribe-row { border-bottom:0; }
@media(max-width:600px) {
 .essay-revision { top:16px; right:16px; }
 .essay-revision .frame-status { font-size:9px; }
 .revision-updated { font-size:7px; }
 .essay-soundtrack { flex-basis:50px; width:50px; }
 .soundtrack-note { left:-5px; }
}

/* A centered title with a fine ornament, and one consistent catalogue tag. */
.essays-index .index-head { display:flex; align-items:center; justify-content:center; gap:20px; margin:0 0 48px; text-align:center; }
.essays-index .index-head::before, .essays-index .index-head::after { content:''; height:1px; width:clamp(24px,5vw,60px); background:linear-gradient(to right,transparent,var(--border-50)); }
.essays-index .index-head::after { background:linear-gradient(to left,transparent,var(--border-50)); }
.essay-id-tag { display:inline-block; padding:4px 7px; border:1px solid var(--border-25); font-family:var(--font-mono); font-size:9px; font-weight:400; line-height:1.2; letter-spacing:.03em; color:var(--ink-50); white-space:nowrap; }
.tl-no { margin-bottom:10px; }
.essay-location { position:absolute; top:18px; left:20px; display:flex; align-items:center; gap:12px; }
.essay-location .essay-top-back { position:static; margin:0; padding:0; }
@media(max-width:600px) {
 .essays-index .index-head { margin:0 0 36px; gap:16px; }
 .essay-location { top:16px; left:16px; gap:10px; }
 .essay-id-tag { font-size:8px; padding:4px 6px; }
}