/* Norte — home (project index). Port of the "Homepage — project index" layout. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFFFFF; }
html.nh-dark, html.nh-dark body { background: #000000; }
/* the page fills the whole height of the phone, behind the browser's bars too (100lvh);
   what must stay readable (captions, buttons) keeps clear of them by --vb */
.nh {
	--bg: #FFFFFF; --fg: #000000; --vb: 0px;
	position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; overflow: hidden;
	background: var(--bg); color: var(--fg);
	font-family: 'NH Franklin', 'Libre Franklin', Helvetica, Arial, sans-serif;
	font-weight: 600; font-size: 12px; line-height: 1.3;
	touch-action: none; -webkit-font-smoothing: antialiased;
	transition: background-color .4s ease, color .4s ease;
	-webkit-user-select: none; user-select: none;
}
.nh { --glass: rgba(255, 255, 255, .72); }
@supports (height: 100dvh) { .nh { --vb: calc(100lvh - 100dvh); } }
.nh.is-dark { --bg: #000000; --fg: #FFFFFF; --glass: rgba(0, 0, 0, .62); }
.nh a { color: inherit; text-decoration: none; }
.nh a:hover { opacity: .6; }
.nh button { font: inherit; color: inherit; }

/* ---- the two views: home and archive switch in place ---- */
.nh-view { position: absolute; inset: 0; transition: transform 1.45s cubic-bezier(.45, 0, .2, 1), opacity 1.1s cubic-bezier(.4, 0, .2, 1) .2s; }
.nh-view.is-entering { transform: translate3d(0, 20vh, 0); opacity: 0; transition: none; }
.nh-view.is-leaving { transform: translate3d(0, -20vh, 0); opacity: 0; pointer-events: none; transition: transform 1.45s cubic-bezier(.45, 0, .2, 1), opacity .95s cubic-bezier(.4, 0, .6, 1); }

/* ---- project tiles ---- */
.nh-tile {
	position: absolute; top: 0; left: 0; display: block;
	will-change: transform; transition: opacity .35s ease;
}
.nh .nh-tile:hover { opacity: 1; }
.nh-tile { cursor: grab; -webkit-user-drag: none; }
.nh-tile.is-dragging { cursor: grabbing; }
.nh-tile:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.nh-tile .nh-m {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; pointer-events: none;
}
.nh-tile .nh-lbl {
	position: absolute; left: 0; bottom: 100%; width: 100%;
	overflow: hidden; pointer-events: none; color: var(--fg);
	opacity: 0; transition: opacity .3s ease;
}
.nh-tile.is-hov .nh-lbl { opacity: 1; }
.nh-foot {
	position: absolute; left: 0; top: 100%; width: 100%; box-sizing: border-box;
	display: flex; justify-content: space-between; gap: 1em; padding-top: 5px;
	font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; color: var(--fg);
}
.nh-ft { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nh-marq { display: inline-flex; white-space: nowrap; line-height: 1.3; animation: nhMarq linear infinite; }
.nh-marq > span { display: inline-flex; gap: 2.5em; padding-right: 6em; }
.nh-i4 { font-weight: 400; font-style: italic; }
.nh-i6 { font-weight: 600; font-style: italic; }
.nh-r4 { font-weight: 400; }
@keyframes nhMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- archive: one centred row per project ---- */
.nh-row {
	position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center;
	pointer-events: none; will-change: transform; transition: opacity .35s ease;
}
.nh .nh-row:hover { opacity: 1; }
.nh-row > * { pointer-events: auto; }
.nh-row:focus-visible { outline: none; }
.nh-row:focus-visible .nh-strip { outline: 2px solid var(--fg); outline-offset: 3px; }
.nh-row-head { display: flex; justify-content: center; gap: 24px; padding-bottom: 6px; white-space: nowrap; }
.nh-strip { display: flex; justify-content: center; gap: 4px; }
.nh-th { flex: none; position: relative; overflow: hidden; display: block; }
.nh-th .nh-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.nh.is-returning .nh-row { transition: opacity .8s ease .2s; }
/* first view: the rows fade in one after another */
.nh-row { animation: nhRowIn 2.4s cubic-bezier(.3, .1, .2, 1) backwards; animation-delay: var(--in, 0s); }
@keyframes nhRowIn { from { opacity: 0; } to { opacity: 1; } }
.nh.is-open .nh-row { opacity: 0 !important; pointer-events: none; }
.nh-nav a[aria-current="page"] { opacity: .5; }

/* ---- chrome ---- */
.nh-head {
	position: absolute; top: 0; left: 0; right: 0; z-index: 1001;
	display: flex; flex-direction: column; gap: 36px; padding: 24px;
	pointer-events: none; transition: opacity .4s ease;
}
.nh-logo { display: block; width: 100%; pointer-events: auto; }
.nh-logo svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.nh-sub { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.nh-tag { margin: 0; max-width: 220px; }
.nh-nav { display: flex; justify-content: flex-end; align-items: center; gap: 24px; pointer-events: auto; }
.nh-about-btn { padding: 0; background: none; border: 0; cursor: pointer; }
.nh-about-btn:hover, .nh-about-btn[aria-expanded="true"] { opacity: .6; }
.nh-about {
	position: absolute; right: 0; top: calc(100% + 14px); width: 340px; max-width: calc(100vw - 32px);
	overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
	padding: 16px 18px 18px; pointer-events: auto; color: var(--fg); background: var(--glass);
	-webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
	animation: nhFade .25s ease; z-index: 2; cursor: grab; touch-action: none; will-change: transform;
}
.nh-about.is-dragging { cursor: grabbing; }
.nh-about-x {
	position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 10px;
	background: none; border: 0; cursor: pointer; box-sizing: border-box;
}
.nh-about-x svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nh-about-x:hover { opacity: .6; }
.nh-about-t { margin: 0 0 6px; }
.nh-about-t .nh-r4 { padding: 0 .15em; }
.nh-about-c { font-weight: 400; margin-bottom: 18px; }
.nh-about-c:last-child { margin-bottom: 0; }
.nh-about-c p { margin: 0 0 .8em; }
.nh-about-c p:last-child { margin-bottom: 0; }
.nh-about-c a { text-decoration: underline; text-underline-offset: 2px; }
.nh-sw { margin: -15px -15px -15px -9px; padding: 15px; background: none; border: 0; cursor: pointer; display: flex; align-items: center; }
.nh-sw > span { position: relative; display: block; width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 12px; box-sizing: border-box; }
.nh-sw > span > span { position: absolute; top: 1.5px; left: 1.5px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: left .25s ease; }
.nh.is-dark .nh-sw > span > span { left: 13.5px; }
.nh-cap {
	position: absolute; left: 0; right: 0; bottom: var(--vb); z-index: 1000;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
	padding: 20px 24px; pointer-events: none; transition: opacity .4s ease;
}
.nh-pair { display: flex; gap: 24px; }
.nh-copy { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; }
.nh-hint { flex: none; font-weight: 400; }
.nh.is-open .nh-head, .nh.is-open .nh-cap { opacity: 0; pointer-events: none; }
.nh.is-open .nh-head * { pointer-events: none; }
.nh.is-open .nh-tile { opacity: 0 !important; pointer-events: none; }

/* ---- open project ---- */
.nh-open { position: absolute; inset: 0 0 var(--vb) 0; z-index: 1100; cursor: grab; }
.nh-open.is-dragging, .nh-open.is-dragging * { cursor: grabbing !important; }
.nh-back { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--bg); cursor: inherit; animation: nhFade .35s ease; }
.nh-stage { position: absolute; inset: 0; pointer-events: none; animation: nhIn .5s cubic-bezier(.2,.7,.2,1); }
.nh-track { position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: 16px; pointer-events: none; will-change: transform; }
.nh-slide {
	flex: none; position: relative; height: 100%; padding: 0; border: 0; background: transparent;
	cursor: inherit; pointer-events: auto; opacity: .45; transition: opacity .35s ease; overflow: hidden;
}
.nh-slide.is-on, .nh-slide.nh-text { opacity: 1; }
.nh-slide .nh-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.nh-slide.is-media { background: var(--tone, #B9B2A6); }
/* first slide: the project's text, sized like an image */
.nh-text {
	box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start;
	text-align: left; padding: 0; color: var(--fg); cursor: default;
}
.nh-text h2 { margin: 0 0 8px; font-weight: 600; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.1; letter-spacing: -.005em; }
.nh-text .nh-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; }
.nh-text p { margin: 22px 0 0; white-space: pre-line; font-weight: 400; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.3; max-width: 30em; }
.nh-bar {
	position: absolute; left: 24px; right: 24px; bottom: 16px; display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; animation: nhFade .5s ease;
}
.nh-ctl { display: flex; align-items: center; gap: 4px; pointer-events: auto; }
.nh-ctl button { padding: 10px 8px; background: none; border: 0; cursor: pointer; }
.nh-ctl button:hover { opacity: .6; }
.nh-ctl .nh-close { padding-left: 16px; padding-right: 0; }
.nh-ctl .nh-snd { margin-right: 12px; min-width: 72px; text-align: left; }
.nh-ctl .nh-snd[hidden], .nh-ctl .nh-fs[hidden] { display: none; }
.nh-ctl-l { display: flex; align-items: center; }
.nh-ctl .nh-fs { padding: 10px 8px; color: var(--fg); }
.nh-fs svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nh-slide video:fullscreen { object-fit: contain; background: #000; }
.nh-slide video:-webkit-full-screen { object-fit: contain; background: #000; }
.nh-count { font-weight: 400; min-width: 44px; text-align: center; }
.nh-x {
	position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; padding: 12px; box-sizing: border-box;
	background: none; border: 0; cursor: pointer; color: var(--fg); animation: nhFade .5s ease;
}
.nh-x svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nh-x:hover { opacity: .6; }
/* leaving a project: the row slides away and the home comes back underneath */
.nh-open.is-leaving { pointer-events: none; }
.nh-open.is-leaving .nh-back { opacity: 0; transition: opacity .75s ease; }
.nh-open.is-leaving .nh-stage { transform: translate3d(var(--out, -100vw), 0, 0); opacity: 0; transition: transform .95s cubic-bezier(.6, 0, .3, 1), opacity .45s ease .5s; }
.nh-open.is-leaving .nh-bar, .nh-open.is-leaving .nh-x { opacity: 0; transition: opacity .3s ease; }
.nh.is-returning .nh-tile { transition: opacity .8s ease .2s; }
.nh.is-returning .nh-head, .nh.is-returning .nh-cap { transition: opacity .8s ease .2s; }
@keyframes nhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nhIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
	.nh-head { padding: 16px; gap: 20px; }
	.nh-nav { gap: 14px; }
	.nh-cap { padding: 16px; }
	.nh-about { left: 0; right: 0; width: auto; max-width: none; cursor: auto; touch-action: pan-y; }
	.nh-hint, .nh-cnt { display: none; }
	.nh-copy { bottom: 16px; }
	/* in a project: number and title at the top; sound (and full screen) left, prev/next centre, close right */
	.nh-bar { inset: 0; display: block; }
	.nh-bar .nh-pair { position: absolute; top: 18px; left: 16px; right: 56px; gap: 16px; flex-wrap: wrap; }
	.nh-ctl { position: absolute; left: 16px; right: 16px; bottom: max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 0; }
	.nh-ctl-l { grid-column: 1; justify-self: start; }
	.nh-ctl .nh-snd { margin-right: 0; min-width: 0; padding-left: 0; }
	.nh-ctl .nh-prev { grid-column: 2; }
	.nh-count { grid-column: 3; }
	.nh-ctl .nh-next { grid-column: 4; }
	.nh-ctl .nh-close { grid-column: 5; justify-self: end; padding-left: 8px; }
	.nh-x { top: 6px; right: 6px; }
	.nh-foot { padding-left: 16px; padding-right: 16px; }
	.nh-tile { cursor: pointer; }
	.nh-text h2 { font-size: 20px; }
	.nh-text p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.nh-marq { animation: none; }
}