/*
 * Thought.global — the footer on every Thought page.
 * Owner, 12 Oct 2026: "all pages must have the same footer as the homepage". So this sheet is the
 * homepage footer treatment (home/assets/world.css, "the footer: the ground beneath the observatory,
 * where the thread ends") copied value for value and re-scoped to body.thf-foot:not(.tho-world).
 * The homepage itself keeps world.css and is untouched. The base layout below 1100px comes from
 * thought-profile.css on every page, exactly as it does on the homepage.
 * The coda (the thread's last star) is server-rendered here with the same hook world.js uses
 * ([data-thw-coda]); a page's golden thread ends on it.
 */

@font-face {
	font-family: "Thought Display";
	src: url("../../home/assets/fonts/fraunces-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.thf-foot {
	--thf-f-bone: #f1ede4;
	--thf-f-gold: #c9a35e;
	--thf-f-gold-hi: #e3c58c;
	--thf-f-night: #060a15;
	--thf-f-display: "Thought Display", "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
	--thf-f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--thf-f-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ----- the footer: the ground beneath the observatory, where the thread ends (homepage values) ----- */
body.thf-foot:not(.tho-world) .sh-thought-footer { position: relative; gap: 40px 0; padding: 64px max(6vw, 24px) 36px; border-top: 0; background: radial-gradient(640px 260px at 50% 0%, rgba(242, 200, 121, .09), transparent 72%), radial-gradient(900px 400px at 0% 100%, rgba(74, 53, 87, .22), transparent 70%), #04060c; color: #cfc8b8; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--thf-f-bone); font: 420 clamp(2.1rem, 1.7rem + 1vw, 2.7rem)/1 var(--thf-f-display); font-variation-settings: "SOFT" 60, "opsz" 96; letter-spacing: -.015em; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-brand::before { content: ""; width: 18px; height: 18px; background: var(--thf-f-gold-hi); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-intro > span { color: #bdb6a6; font: 400 1.08rem/1.45 var(--thf-f-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-heading { margin: 0 0 12px; color: var(--thf-f-gold); font: 700 11px/1.3 var(--thf-f-sans); letter-spacing: .2em; text-transform: uppercase; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-group ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-group a { color: var(--thf-f-bone); font: 500 15px/1.3 var(--thf-f-sans); text-decoration: none; background: linear-gradient(var(--thf-f-gold-hi), var(--thf-f-gold-hi)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--thf-f-ease), color .2s; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-group a:hover, body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-group a:focus-visible { color: var(--thf-f-gold-hi); background-size: 100% 1px; }
body.thf-foot:not(.tho-world) .sh-thought-footer :focus-visible { outline: 2px solid var(--thf-f-gold-hi) !important; outline-offset: 3px; }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-social a { border-color: rgba(201, 163, 94, .45); color: var(--thf-f-gold-hi); }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-social a:hover, body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-social a:focus-visible { border-color: var(--thf-f-gold-hi); background: rgba(201, 163, 94, .12); box-shadow: 0 0 18px rgba(227, 197, 140, .3); }
body.thf-foot:not(.tho-world) .sh-thought-footer .thought-recommend-thinker__input { height: 46px; padding: 0 18px; border: 1px solid rgba(201, 163, 94, .45); border-right: 0; border-radius: 999px 0 0 999px; background: rgba(241, 237, 228, .06); color: var(--thf-f-bone); font: 500 14.5px/1 var(--thf-f-sans); }
body.thf-foot:not(.tho-world) .sh-thought-footer .thought-recommend-thinker__input::placeholder { color: #a6aec0; }
body.thf-foot:not(.tho-world) .sh-thought-footer .thought-recommend-thinker__submit { height: 46px; padding: 0 22px; border: 1px solid var(--thf-f-gold); border-radius: 0 999px 999px 0; background: var(--thf-f-gold); color: var(--thf-f-night); font: 700 14px/1 var(--thf-f-sans); transition: background-color .2s; }
body.thf-foot:not(.tho-world) .sh-thought-footer .thought-recommend-thinker__submit:hover { background: var(--thf-f-gold-hi); }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-powered { position: relative; padding-top: 30px; border-top: 1px dashed rgba(201, 163, 94, .32); color: #a6aec0; font: 600 12.5px/1.5 var(--thf-f-sans); }
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-powered a { color: var(--thf-f-bone); }

/* the coda: the thread's last star, on the last line of the page (the homepage's .thw-coda, same values) */
body.thf-foot:not(.tho-world) .thf-coda { display: grid; place-items: center; width: 42px; height: 42px; margin: -52px auto 12px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #1f2a48, #0b1426 72%); box-shadow: 0 0 0 1.5px var(--thf-f-gold), 0 0 0 5px #04060c, 0 0 0 6px rgba(201, 163, 94, .4); color: var(--thf-f-gold-hi); transition: box-shadow .6s var(--thf-f-ease); }
body.thf-foot:not(.tho-world) .thf-coda .thf-spark { width: 16px; height: 16px; fill: currentColor; }
body.thf-foot:not(.tho-world) .thf-coda.is-lit { box-shadow: 0 0 0 1.5px var(--thf-f-gold-hi), 0 0 0 5px #04060c, 0 0 0 6px rgba(227, 197, 140, .75), 0 0 34px 8px rgba(227, 197, 140, .4); }
@media (min-width: 1100px) {
	/* a centre corridor the thread can travel down without touching a word */
	body.thf-foot:not(.tho-world) .sh-thought-footer { grid-template-columns: minmax(0, 1fr) clamp(120px, 12vw, 220px) minmax(0, 1fr); }
	body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-intro { grid-column: 1; }
	body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-links { grid-column: 3; }
}
body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-groups { display: grid; grid-template-columns: repeat(4, max-content); gap: 22px 40px; }
@media (max-width: 1279px) { body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-groups { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 1099px) { body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-groups { grid-template-columns: repeat(4, max-content); } }
@media (max-width: 760px) { body.thf-foot:not(.tho-world) .sh-thought-footer .sh-thought-footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
	body.thf-foot:not(.tho-world) .sh-thought-footer * { transition: none !important; animation: none !important; }
}
