@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Franklin:ital,wght@0,400;0,600;0,700;0,800;1,500&display=swap');
:root{--ink:#0f0f0d;--paper:#f4f0e7;--paper2:#ebe6da;--line:#d6d0c4;--muted:#68645c;--signal:#ff4b2b;--acid:#d8ff38;--max:1220px}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}body{margin:0}a{color:inherit}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.topbar{background:#0f0f0d;color:#fff;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700}.topbar .wrap{display:flex;justify-content:space-between;padding:.55rem 0}.mast{border-bottom:1px solid var(--line)}.mast-main{display:flex;align-items:end;justify-content:space-between;padding:1.1rem 0 .85rem}.brand{font-family:'Libre Franklin';font-weight:800;font-size:clamp(2.5rem,5vw,4.7rem);letter-spacing:-.07em;text-decoration:none;line-height:.85}.brand i{font-style:normal;color:var(--signal)}.nav{display:flex;gap:1.4rem;font-size:.8rem;font-weight:700}.nav a{text-decoration:none}.topics{border-top:1px solid var(--line);display:flex;gap:1.5rem;padding:.65rem 0;font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;overflow:auto}.topics b{color:var(--signal)}.eyebrow{font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.eyebrow span{color:var(--signal)}h1,h2,h3{font-family:'Libre Franklin',sans-serif;letter-spacing:-.05em}p{line-height:1.6}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;padding:4.3rem 0 4.8rem;align-items:center;border-bottom:1px solid var(--line)}.hero h1{font-size:clamp(3.7rem,8vw,7.8rem);line-height:.84;margin:.75rem 0 1.4rem}.hero .dek{font-family:'Libre Franklin';font-size:1.18rem;line-height:1.5;max-width:710px;color:#403d37}.read{display:inline-block;margin-top:1rem;font-weight:800;text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:5px}.datapanel{background:#11110f;color:#fff;min-height:490px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.datapanel:before,.datapanel:after{content:"";position:absolute;border:2px solid var(--acid);border-radius:999px;width:330px;height:330px;right:-80px;top:55px}.datapanel:after{width:100%;height:2px;border:0;background:var(--acid);transform:rotate(-19deg);top:56%;right:-15%}.datapanel .big{font-family:'Libre Franklin';font-weight:800;font-size:clamp(4rem,9vw,7rem);letter-spacing:-.06em;line-height:.78;position:relative;z-index:2}.datapanel .unit{color:var(--acid);font-size:1.2rem}.datapanel .facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;position:relative;z-index:2}.fact{border-top:1px solid #555;padding-top:.8rem}.fact b{display:block;font-size:1.35rem;color:var(--acid)}.section{padding:4rem 0}.section-head{display:flex;justify-content:space-between;align-items:end;border-bottom:3px solid var(--ink);padding-bottom:.7rem;margin-bottom:1.4rem}.section-head h2{font-size:clamp(2rem,4vw,3.3rem);margin:0}.story-row{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:1rem;align-items:center;border-bottom:1px solid var(--line);padding:1.5rem 0;text-decoration:none}.story-row:first-of-type{border-top:1px solid var(--line)}.story-row .num{color:var(--signal);font-weight:800;font-size:.72rem}.story-row h3{font-size:clamp(1.65rem,3vw,2.7rem);margin:0;line-height:.95}.story-row p{color:var(--muted);margin:.45rem 0 0}.manifesto{background:var(--acid);padding:4.8rem 0}.manifesto blockquote{font-family:'Libre Franklin';font-weight:800;font-size:clamp(3rem,7vw,6.5rem);letter-spacing:-.065em;line-height:.9;margin:0 0 1.6rem;max-width:1000px}.manifesto em{font-weight:500}.manifesto p{max-width:680px;font-size:1.05rem}.footer{background:#11110f;color:#fff;padding:3rem 0;margin-top:4rem}.footer .row{display:flex;justify-content:space-between;gap:2rem}.footer .logo{font-family:'Libre Franklin';font-size:1.7rem;font-weight:800;letter-spacing:-.05em}.footer small{color:#aaa}.pagehead{padding:4rem 0 2rem}.pagehead h1{font-size:clamp(3.5rem,8vw,7rem);line-height:.87;margin:.6rem 0}.article-wrap{width:min(calc(100% - 40px),900px);margin:auto;padding:3.2rem 0}.article-wrap h1{font-size:clamp(3.1rem,7vw,6.5rem);line-height:.88;margin:.65rem 0 1.2rem}.article-wrap .dek{font-family:'Libre Franklin';font-size:1.35rem;color:#4d4942;line-height:1.5}.article-meta{display:flex;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;margin:1.7rem 0 2.5rem;font-size:.75rem;color:var(--muted)}.article-data{background:#11110f;color:#fff;padding:2rem;margin:0 0 2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.article-data b{display:block;color:var(--acid);font-family:'Libre Franklin';font-size:2.1rem;letter-spacing:-.04em}.article-data span{font-size:.76rem}.body{font-family:Georgia,serif;font-size:1.16rem;line-height:1.78}.body h2{font-family:'Libre Franklin';font-size:2.25rem;line-height:1;margin:3.2rem 0 1rem}.body p{margin:0 0 1.45rem}.body a{text-decoration-thickness:1px}.note{border-left:5px solid var(--acid);background:#ebe6da;padding:1.2rem 1.4rem;font-family:'DM Sans';font-size:.95rem;margin:2rem 0}.sources{margin-top:3.2rem;border-top:3px solid var(--ink);padding-top:1.2rem}.sources h2{font-size:2rem}.sources li{margin:.8rem 0}.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;padding-bottom:4rem}.about-grid h2{font-size:3rem;margin:.2rem 0 1rem}.about-grid p{font-size:1.1rem}.principles{background:#111;color:white;padding:2rem}.principles h3{color:var(--acid);font-size:1.6rem}.principles li{margin:1rem 0;line-height:1.45}.notfound{min-height:55vh;display:grid;place-items:center;text-align:center}.notfound h1{font-size:8rem;margin:0}.notfound p{font-size:1.2rem}@media(max-width:800px){.hero,.about-grid{grid-template-columns:1fr}.hero{padding-top:3rem}.datapanel{min-height:370px}.mast-main{align-items:center}.nav{gap:.9rem}.topics{gap:1rem}.article-data{grid-template-columns:1fr}.topbar .wrap span:last-child{display:none}}@media(max-width:560px){.wrap,.article-wrap{width:min(calc(100% - 26px),var(--max))}.hero h1{font-size:3.65rem}.brand{font-size:2.9rem}.nav{font-size:.72rem}.story-row{grid-template-columns:40px 1fr}.story-row>strong{display:none}.footer .row{flex-direction:column}.article-wrap h1{font-size:3.5rem}}


/* How I Think hero refinement */
.hero h1 {
	font-size: clamp(2.5rem, 4vw, 4rem) !important;
	line-height: .92 !important;
}

.hero {
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.hero-media {
	margin: 0;
}

.hero-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hero-media figcaption {
	font-size: .65rem;
	color: var(--muted);
	line-height: 1.35;
	margin-top: .55rem;
}

@media (max-width: 800px) {
	.hero {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.hero h1 {
		font-size: 2.6rem !important;
	}
}

/* =========================================================
   HOW I THINK — MOTION SYSTEM
   restrained / editorial / high-tech
   ========================================================= */

:root {
	--motion-fast: 180ms;
	--motion-medium: 420ms;
	--motion-slow: 700ms;
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
	--ease-snappy: cubic-bezier(.2, .8, .2, 1);
}

/* Progressive cross-page transitions */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: hit-page-out 180ms var(--ease-smooth) both;
}

::view-transition-new(root) {
	animation: hit-page-in 360ms var(--ease-smooth) both;
}

@keyframes hit-page-out {
	to {
		opacity: 0;
		transform: scale(.995);
	}
}

@keyframes hit-page-in {
	from {
		opacity: 0;
		transform: translateY(7px) scale(.998);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


/* Smooth global interactions */
a,
button,
img,
.story-row,
.article-figure,
.hero-media {
	transition:
		color var(--motion-fast) ease,
		background-color var(--motion-fast) ease,
		border-color var(--motion-fast) ease,
		opacity var(--motion-fast) ease,
		transform var(--motion-medium) var(--ease-smooth),
		filter var(--motion-medium) var(--ease-smooth);
}


/* Elegant text-link motion */
main a:not(.hero-media a),
footer a,
.nav a,
.topbar a {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition:
		color var(--motion-fast) ease,
		text-decoration-color var(--motion-fast) ease,
		text-underline-offset var(--motion-fast) ease;
}

main a:hover,
footer a:hover {
	text-underline-offset: .28em;
}


/* Hero feels alive without "animating" */
.hero-media {
	overflow: hidden;
}

.hero-photo {
	transform: scale(1);
	will-change: transform;
}

.hero-media:hover .hero-photo {
	transform: scale(1.018);
}


/* Article images: subtle cinematic lift */
.article-figure {
	overflow: hidden;
}

.article-figure img {
	transition:
		transform 800ms var(--ease-smooth),
		filter 800ms var(--ease-smooth);
}

.article-figure:hover img {
	transform: scale(1.012);
	filter: contrast(1.015);
}


/* Story rows/cards */
.story-row {
	position: relative;
}

.story-row:hover {
	transform: translateX(4px);
}


/* Scroll reveal states */
.motion-reveal {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(3px);
}

.motion-reveal.motion-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition:
		opacity var(--motion-slow) var(--ease-smooth),
		transform var(--motion-slow) var(--ease-smooth),
		filter var(--motion-slow) var(--ease-smooth);
	transition-delay: var(--motion-delay, 0ms);
}


/* Header entrance */
header,
.site-header,
.masthead {
	animation: hit-header-in 650ms var(--ease-smooth) both;
}

@keyframes hit-header-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


/* Hero load sequence */
.hero > * {
	animation: hit-hero-in 700ms var(--ease-smooth) both;
}

.hero > *:nth-child(1) {
	animation-delay: 80ms;
}

.hero > *:nth-child(2) {
	animation-delay: 160ms;
}

@keyframes hit-hero-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


/* Tiny futuristic accent on brand dot/accent */
.brand-dot,
.accent-dot {
	transition:
		transform 350ms var(--ease-smooth),
		box-shadow 350ms var(--ease-smooth);
}

.brand:hover .brand-dot,
.site-title:hover .accent-dot {
	transform: scale(1.12);
}


/* Never compromise accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.motion-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}


/* =========================================================
   HOW I THINK — MOTION REFINEMENT
   slower / smoother / sticky navigation
   ========================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

/* Sticky main masthead */
header,
.site-header,
.masthead {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(246, 242, 233, .96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Slower overall timing */
:root {
	--motion-fast: 260ms;
	--motion-medium: 650ms;
	--motion-slow: 950ms;
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

/* Softer page transitions */
::view-transition-old(root) {
	animation: hit-page-out 420ms var(--ease-smooth) both;
}

::view-transition-new(root) {
	animation: hit-page-in 720ms var(--ease-smooth) both;
}

@keyframes hit-page-out {
	to {
		opacity: 0;
		transform: translateY(-3px);
	}
}

@keyframes hit-page-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Remove blur from reveal animation to eliminate flicker */
.motion-reveal {
	opacity: 0;
	transform: translateY(22px);
	filter: none !important;
}

.motion-reveal.motion-visible {
	opacity: 1;
	transform: translateY(0);
	filter: none !important;
	transition:
		opacity 900ms var(--ease-smooth),
		transform 900ms var(--ease-smooth);
	transition-delay: var(--motion-delay, 0ms);
}

/* Slower hero entrance */
.hero > * {
	animation-duration: 900ms !important;
}

.hero > *:nth-child(1) {
	animation-delay: 120ms !important;
}

.hero > *:nth-child(2) {
	animation-delay: 260ms !important;
}

/* More refined image hover */
.hero-media:hover .hero-photo,
.article-figure:hover img {
	transform: scale(1.008);
}

/* Scroll-to-top control */
.hit-scroll-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 1200;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(0,0,0,.22);
	border-radius: 50%;
	background: rgba(246,242,233,.94);
	color: #111;
	display: grid;
	place-items: center;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 350ms ease,
		transform 500ms var(--ease-smooth),
		background-color 250ms ease;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.hit-scroll-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hit-scroll-top:hover {
	background: #111;
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 700px) {
	.hit-scroll-top {
		right: 18px;
		bottom: 18px;
		width: 42px;
		height: 42px;
	}
}