/*
 * Nick Proto: component styles. Colors and type come from theme.json presets.
 */

:root {
	--np-bg: var(--wp--preset--color--base, #0B0B0C);
	--np-surface: var(--wp--preset--color--surface, #141416);
	--np-line: var(--wp--preset--color--line, #1F1F22);
	--np-border: var(--wp--preset--color--border, #3A3A3F);
	--np-fg: var(--wp--preset--color--contrast, #F2F0EB);
	--np-body: var(--wp--preset--color--body, #C9C6BF);
	--np-muted: var(--wp--preset--color--muted, #A3A09A);
	--np-subtle: var(--wp--preset--color--subtle, #8E8B85);
	--np-accent: var(--wp--preset--color--accent, #FFFFFF);
	--np-display: var(--wp--preset--font-family--display, Archivo, sans-serif);
	--np-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--np-header-h: 88px;
	--np-ease: cubic-bezier(.2, .7, .2, 1);
}

html {
	scroll-padding-top: calc(var(--np-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--np-accent); color: var(--np-bg); }

img { height: auto; }

:where(h1, h2, h3) { text-wrap: balance; }

/* ---------- Page transitions (Chrome, Edge, Safari 18.2+; others load normally) ---------- */

@view-transition { navigation: auto; }

header.wp-block-template-part { view-transition-name: np-header; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .35s;
	animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Header ---------- */

header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgba(11, 11, 12, .88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
/* A blur (or the page-transition name) on the header would trap the full-screen mobile
   menu inside the header bar and stop the menu's own blur from reaching the page, so
   switch both off while the menu is open. */
html.has-modal-open header.wp-block-template-part,
header.wp-block-template-part:has(.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: transparent;
	view-transition-name: none;
}

.np-header { padding-block: 0; }

.np-header__inner {
	min-height: var(--np-header-h);
	align-items: center;
	gap: 24px;
}

.np-logo { margin: 0; }
.np-logo img { display: block; height: 44px; width: auto !important; }
.np-logo a { display: block; }

.np-nav .wp-block-navigation__container { gap: 24px; }
/* Sit the menu a little lower so it lines up with the bottom of the NICK PROTO logo. */
@media (min-width: 720px) { .np-nav { padding-top: 8px; } }
/* WordPress shows the full menu from 600px, but four links don't fit beside the logo
   until about 720px, so keep the menu button up to there. */
@media (min-width: 600px) and (max-width: 719px) {
	.np-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.np-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.np-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
}
.np-nav .wp-block-navigation-item__content {
	padding: 4px 0;
	text-shadow: 0 0 0 rgba(242, 240, 235, 0);
	transition: text-shadow .3s var(--np-ease), color .3s var(--np-ease);
}
/* Soft white glow on menu items, matching the tile glow. */
.np-nav .wp-block-navigation-item__content:hover,
.np-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--np-fg);
	text-shadow: 0 0 10px rgba(242, 240, 235, .55), 0 0 26px rgba(242, 240, 235, .28);
}
.np-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: var(--np-accent); }

.np-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* 80% opaque, with the page behind blurred. */
	background: rgba(11, 11, 12, .8) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--np-fg) !important;
	padding: 24px clamp(16px, 2.75vw, 56px);
}
.np-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 28px; font-size: 28px; }
.np-nav .wp-block-navigation__responsive-container-open,
.np-nav .wp-block-navigation__responsive-container-close { color: var(--np-fg); }

/* Vertical side text on wide screens */
.np-rail {
	position: fixed;
	top: 50%;
	z-index: 40;
	margin: 0 !important;
	font-family: var(--np-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--np-subtle);
	white-space: nowrap;
	pointer-events: none;
}
.np-rail--left { left: 24px; transform: translate(-50%, -50%) rotate(-90deg); }
.np-rail--right { right: 24px; transform: translate(50%, -50%) rotate(90deg); }
@media (max-width: 900px) { .np-rail { display: none; } }

/* ---------- Shared text styles ---------- */

.np-eyebrow {
	font-family: var(--np-mono);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--np-subtle);
	margin: 0;
}
.np-eyebrow--accent, .np-eyebrow.has-accent-color { color: var(--np-accent); }

.np-tags {
	font-family: var(--np-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--np-muted);
	margin: 0;
}

.np-display {
	font-family: var(--np-display);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: .95;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: transparent;
	color: var(--np-fg);
	border: 1px solid rgba(242, 240, 235, .4);
	padding: 12px 23px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--np-fg); color: var(--np-fg); background: transparent; }

/* ---------- Home: hero ---------- */

.np-hero.wp-block-cover {
	margin-top: 24px;
	border-radius: 6px;
	overflow: hidden;
	/* Same proportions as the original nickproto.com banner (about 2.94 : 1). */
	aspect-ratio: 47 / 16;
	min-height: auto;
	padding: 24px;
}
/* The floor sits on the inner container: a min-height on the cover itself would
   combine with aspect-ratio and force the hero far wider than a phone screen. */
.np-hero .wp-block-cover__inner-container { min-height: 212px; }
/* Below ~800px the wide ratio gets too short for the logo and button, so the hero
   switches to a 260px height (the point where both sizes meet). */
@media (max-width: 800px) { .np-hero.wp-block-cover { aspect-ratio: auto; } }
.np-hero .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.np-hero__logo { margin: 0 auto !important; width: min(520px, 72%); }
.np-hero__logo img { width: 100% !important; }
/* The logo links down to the Prototype Productions section. */
.np-hero__logo a { display: block; border-radius: 4px; transition: filter .3s var(--np-ease), transform .3s var(--np-ease); }
.np-hero__logo a:hover { filter: drop-shadow(0 0 14px rgba(242, 240, 235, .35)); transform: scale(1.02); }
.np-hero__logo a:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 8px; }
.np-hero .wp-block-buttons { justify-content: center; }
.np-btn-play .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 10px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
	vertical-align: -1px;
}

/* ---------- Section heads ---------- */

.np-section { padding-block: 72px; }

.np-section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 24px;
	padding-bottom: 20px;
	margin-bottom: 28px !important;
}
.np-section-head > * { margin: 0 !important; }
.np-section-head h2 {
	font-size: 22px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.np-section-head__text { display: flex; flex-direction: column; gap: 10px; }
.np-section-head__text p { color: var(--np-muted); font-size: 16px; margin: 0; }

.np-section-work { margin-top: 0 !important; }
.np-film { padding-top: 40px; position: relative; isolation: isolate; }

/* Hollywood hills photo behind the Prototype Productions section, edge to edge,
   fading in from 0% at the top edge, then 20% → 100% → 50% → 0%. */
.np-film::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	right: calc(-1 * var(--wp--style--root--padding-right, 0px));
	aspect-ratio: 2048 / 1500;
	background: url("../images/film-bg.jpg") center top / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .2) 10%, #000 32%, rgba(0, 0, 0, .5) 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .2) 10%, #000 32%, rgba(0, 0, 0, .5) 62%, transparent 100%);
	pointer-events: none;
}
.np-subsection { padding-bottom: 96px; }
.np-subsection:last-child { padding-bottom: 0; }
.np-film.np-section { padding-bottom: 40px; }
.np-subsection > * + * { margin-top: 0 !important; }

/* New Releases: same 1080px column as the project pages, centered. */
.np-film .np-video--feature,
.np-subsection:has(.np-video--feature) { max-width: 1080px; margin-inline: auto !important; padding-bottom: 0; }
.np-subsection:has(.np-video--feature) { padding-bottom: 56px; }
.np-gallery { gap: 24px; display: grid; }
.np-gallery > * { margin-block: 0 !important; }

.np-brand-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding-bottom: 72px; }
.np-brand-intro .wp-block-image { margin: 0; width: clamp(300px, 38vw, 760px); max-width: 100%; }
.np-brand-intro .wp-block-image img { width: 100%; height: auto; }
.np-brand-intro p { max-width: 620px; font-size: 18px; color: var(--np-muted); margin: 0; }

/* ---------- Work grid ---------- */

.np-work { padding-block: 28px 56px; }

.np-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.np-filter {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--np-border);
	background: transparent;
	color: var(--np-fg);
	font: 600 14px/1 var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: background-color .2s var(--np-ease), border-color .2s var(--np-ease), color .2s var(--np-ease);
}
.np-filter:hover { border-color: var(--np-fg); }
.np-filter[aria-pressed="true"] { background: var(--np-fg); border-color: var(--np-fg); color: var(--np-bg); }
.np-filter:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 3px; }

.np-work__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px 24px;
}
@media (min-width: 560px) { .np-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .np-work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .np-work__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.np-work__item[hidden] { display: none; }

.np-tile { display: flex; flex-direction: column; gap: 6px; color: var(--np-fg); }
.np-tile:hover { color: var(--np-fg); }
.np-tile__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	overflow: hidden;
	background: var(--np-surface);
	margin-bottom: 8px;
}
.np-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--np-ease); }
.np-tile:hover .np-tile__media img { transform: scale(1.03); }

/* Soft white glow under a tile on hover (and keyboard focus). */
.np-tile__media { box-shadow: 0 0 0 rgba(242, 240, 235, 0); transition: box-shadow .35s var(--np-ease); }
@media (hover: hover) {
	.np-tile:hover .np-tile__media {
		box-shadow: 0 22px 48px -14px rgba(242, 240, 235, .26), 0 6px 18px -8px rgba(242, 240, 235, .18);
	}
}
.np-tile:focus-visible .np-tile__media {
	box-shadow: 0 22px 48px -14px rgba(242, 240, 235, .26), 0 6px 18px -8px rgba(242, 240, 235, .18);
}
.np-tile__title { font-family: var(--np-display); font-weight: 700; font-size: 18px; line-height: 1.25; transition: color .2s; }
.np-tile:hover .np-tile__title { color: var(--np-accent); }

/* With a white accent, titles and the back link glow on hover instead of changing color. */
.np-tile__title, .np-pager__title, .np-back a { transition: text-shadow .3s var(--np-ease), color .2s; }
.np-tile:hover .np-tile__title,
.np-pager__link:hover .np-pager__title,
.np-back a:hover { text-shadow: 0 0 10px rgba(242, 240, 235, .5), 0 0 24px rgba(242, 240, 235, .25); }
.np-tile__meta { font-family: var(--np-mono); font-size: 11px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--np-muted); }
.np-tile:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 4px; border-radius: 4px; }

/* ---------- Lightweight video ---------- */

.np-video { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.np-video__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	background: #000;
	color: var(--np-bg);
}
.np-video--feature .np-video__frame { border-radius: 6px; }
.np-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--np-ease); }
.np-video__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: rgba(242, 240, 235, .92);
	transition: transform .25s var(--np-ease);
}
.np-video__play svg { width: 18px; height: 18px; margin-left: 3px; }
.np-video--feature .np-video__play { width: 88px; height: 88px; background: var(--np-fg); }
.np-video--feature .np-video__play svg { width: 26px; height: 26px; }
.np-video--small .np-video__play { width: 44px; height: 44px; }
.np-video--small .np-video__play svg { width: 14px; height: 14px; }
/* Same soft white glow as the portfolio tiles, on every video thumbnail (not once it's playing). */
.np-video__frame { box-shadow: 0 0 0 rgba(242, 240, 235, 0); transition: box-shadow .35s var(--np-ease); }
@media (hover: hover) {
	a.np-video__frame:hover {
		box-shadow: 0 22px 48px -14px rgba(242, 240, 235, .26), 0 6px 18px -8px rgba(242, 240, 235, .18);
	}
}
a.np-video__frame:focus-visible {
	box-shadow: 0 22px 48px -14px rgba(242, 240, 235, .26), 0 6px 18px -8px rgba(242, 240, 235, .18);
}
.np-video__frame:hover .np-video__poster { transform: scale(1.03); }
.np-video__frame:hover .np-video__play { transform: scale(1.08); }
.np-video__frame:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 3px; }
.np-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.np-video__meta { display: flex; flex-direction: column; gap: 6px; }
.np-video--feature .np-video__meta { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.np-video__title { font-family: var(--np-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--np-fg); }
.np-video--feature .np-video__title { font-size: 20px; }
.np-video--small .np-video__title { font-size: 16px; }
.np-video__caption { font-family: var(--np-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--np-muted); }

.np-video-grid { gap: 40px 24px !important; }

/* Even rows on wide screens: 3 across for video cards, 4 across for small ones. */
@media (min-width: 700px) {
	.np-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
	.np-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.np-video-grid:has(> .np-video--small) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- Project page ---------- */

.np-back { margin: 0; padding-top: 20px; }
.np-back a { display: inline-block; padding-block: 12px; font-family: var(--np-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--np-muted); }
.np-back a:hover { color: var(--np-accent); }

.single-project .wp-block-post-content > *:first-child { margin-top: 24px; }

/* Project pages use a narrower column than the home page so players stay a comfortable size.
   Change 1080px here to make them wider or narrower. The header and footer keep the full width. */
.single-project main { --wp--style--global--wide-size: 1080px; }

.np-banner { margin-block: 24px 0; }
.np-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; display: block; }
.np-banner.is-style-contain img, .np-banner--contain img { object-fit: contain; }

.np-project-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px 64px;
	padding-block: 64px 48px;
}
.np-project-header__title { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; }
/* Title size steps down with length: up to 10 characters (Zoul, Timespace), 11-17
   (Underscore_, Horror Spell), 18-34, and 35+ (which also gets the full width). */
.np-project-header__h1 { margin: 0; font-size: clamp(44px, 6vw, 96px); }
.np-project-header--m .np-project-header__h1 { font-size: clamp(40px, 4.8vw, 76px); }
.np-project-header--l .np-project-header__h1 { font-size: clamp(36px, 4vw, 62px); line-height: 1; }
.np-project-header--xl .np-project-header__h1 { font-size: clamp(32px, 3.3vw, 52px); line-height: 1.02; }
.np-project-header--xl .np-project-header__title { flex-basis: 100%; }
/* Phones: smaller titles, and long words like "AwesomenessTV" break instead of running off screen. */
@media (max-width: 600px) {
	.np-project-header { padding-block: 40px 32px; }
	.np-project-header__title { min-width: 0; }
	.np-project-header__h1 { font-size: clamp(32px, 10vw, 48px); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
	.np-project-header--m .np-project-header__h1 { font-size: clamp(30px, 9vw, 42px); }
	.np-project-header--l .np-project-header__h1 { font-size: clamp(28px, 8vw, 36px); }
	.np-project-header--xl .np-project-header__h1 { font-size: clamp(26px, 7.5vw, 32px); }
}
.np-project-header__subtitle { margin: 0; font-family: var(--np-display); font-weight: 700; font-size: 22px; color: var(--np-muted); }
.np-project-header__details {
	flex: 1 1 380px;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 24px;
}
.np-project-header__details div { display: flex; flex-direction: column; gap: 8px; }
.np-project-header__details dt { font-family: var(--np-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--np-subtle); }
.np-project-header__details dd { margin: 0; font-size: 16px; line-height: 1.4; color: var(--np-fg); }

.np-intro {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
	padding-block: 56px 72px;
}
.np-intro > * { margin: 0 !important; }
.np-logline {
	flex: 1 1 380px;
	min-width: 0;
	font-family: var(--np-display);
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--np-fg) !important;
}
.np-intro__body { flex: 1 1 520px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.np-intro__body p { margin: 0; }

.np-media { padding-bottom: 80px; }
.np-media .wp-block-image { margin: 0; }
.np-media .wp-block-image img { width: 100%; border-radius: 4px; background: var(--np-surface); display: block; }
.np-media figcaption { margin-top: 10px; text-align: left; }

.np-feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 64px;
	padding-block: 56px 72px;
}
.np-feature > * { margin: 0 !important; }
.np-feature__text { flex: 1 1 420px; min-width: 0; max-width: 620px; }
.np-feature__text h2 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 40px); }
.np-feature__media { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
.np-feature__media .wp-block-image { margin: 0; flex: 1 1 200px; }
.np-feature__media img { max-height: 440px; width: 100%; object-fit: contain; }

.np-footnote { font-family: var(--np-mono); font-size: 11px; letter-spacing: .06em; color: var(--np-subtle) !important; margin-bottom: 72px !important; }

/* Previous / next */
.np-pager {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
	padding-block: 48px 120px;
	margin-top: 0 !important;
}
.np-pager__link { display: flex; align-items: center; gap: 20px; color: var(--np-fg); }
.np-pager__link--next { flex-direction: row-reverse; text-align: right; }
.np-pager__thumb { flex: 0 0 160px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--np-surface); }
.np-pager__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--np-ease); }
.np-pager__link:hover .np-pager__thumb img { transform: scale(1.03); }
.np-pager__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-pager__dir { font-family: var(--np-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--np-subtle); }
.np-pager__title { font-family: var(--np-display); font-weight: 700; font-size: 20px; line-height: 1.25; overflow-wrap: break-word; transition: color .2s; }
.np-pager__link:hover .np-pager__title { color: var(--np-accent); }
@media (max-width: 520px) { .np-pager__thumb { flex-basis: 112px; } .np-pager__title { font-size: 17px; -webkit-hyphens: auto; hyphens: auto; } }

/* ---------- About ---------- */

/* The About page uses the same centered 1080px column as the project pages. */
main:has(.np-about) { --wp--style--global--wide-size: 1080px; }


.np-about {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 64px;
	padding-block: 96px 24px;
}
.np-about > * { margin: 0 !important; }
.np-about__photo { flex: 1 1 380px; min-width: 0; max-width: 480px; margin-inline: auto !important; }
.np-about__photo img { width: 100%; display: block; }
.np-about__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.np-about__text > * { margin: 0 !important; }
.np-about__text h1 { font-size: clamp(44px, 6vw, 88px); }
.np-about__text p a, .np-contact p a { border-bottom: 1px solid rgba(242, 240, 235, .4); transition: border-color .2s; }
.np-about__text p a:hover, .np-contact p a:hover { border-color: var(--np-fg); }
.np-about__lead { font-size: 20px !important; color: var(--np-fg) !important; line-height: 1.55; }

.np-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-block: 24px 120px;
}
.np-contact > * { margin: 0 !important; }
/* Intro line always sits above the form; both share one comfortable column. */
.np-contact__intro, .np-contact .np-form, .np-contact > .wpcf7 { width: 100%; max-width: 880px; min-width: 0; }
.np-contact > * { margin-inline: auto !important; }
.np-contact__intro { color: var(--np-muted); text-align: center; }

/* ---------- Contact form ---------- */

.np-form { display: flex; flex-direction: column; gap: 20px; }
.np-form p { margin: 0; }
.np-form__row { display: flex; flex-wrap: wrap; gap: 20px; }
.np-form__row .np-form__field { flex: 1 1 220px; }
.np-form__field { display: flex; flex-direction: column; gap: 8px; }
.np-form label { font-size: 14px; font-weight: 500; color: var(--np-muted); }
.np-form input:not([type="submit"]):not([type="hidden"]), .np-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 4px;
	border: 1px solid var(--np-border);
	background: var(--np-surface);
	color: var(--np-fg);
	font: inherit;
	font-size: 16px;
}
.np-form textarea { resize: vertical; min-height: 160px; }
.np-form input:focus-visible, .np-form textarea:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 2px; border-color: transparent; }
.np-form__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.np-form__actions button, .np-form__actions input[type="submit"] { cursor: pointer; }
.np-form__status[hidden] { display: none; }
.np-form button[disabled] { opacity: .6; cursor: default; }
.np-form__status { padding: 14px 16px; border-radius: 4px; font-size: 15px; }
.np-form__status--ok { background: rgba(242, 240, 235, .08); color: var(--np-fg); border: 1px solid rgba(242, 240, 235, .4); }

/* Contact Form 7 */
.wpcf7 .np-form, .wpcf7-form.np-form { display: flex; flex-direction: column; gap: 20px; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .np-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.wpcf7 .wpcf7-submit { border: 0; }
.wpcf7 .wpcf7-submit:disabled { opacity: .6; cursor: default; }
.wpcf7 .wpcf7-spinner { margin: 0; background-color: var(--np-muted); }
.wpcf7 .wpcf7-not-valid { border-color: rgba(232, 68, 58, .7) !important; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #F2A59F; }
.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 14px 16px;
	border-radius: 4px;
	border: 1px solid var(--np-border);
	color: var(--np-fg);
	font-size: 15px;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: rgba(242, 240, 235, .4); background: rgba(242, 240, 235, .08); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: rgba(232, 68, 58, .55); background: rgba(232, 68, 58, .12); }
.np-form__status--error { background: rgba(232, 68, 58, .12); color: var(--np-fg); border: 1px solid rgba(232, 68, 58, .55); }

/* ---------- Footer ---------- */

.np-footer { padding-block: 48px 40px; }
.np-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.np-footer .wp-block-social-links { gap: 12px; margin: 0; justify-content: center; }
.np-footer .wp-social-link { border: 1px solid var(--np-border); }
.np-footer .wp-social-link a { padding: 12px; }
/* Copyright line under the icons, only where the side text is hidden (900px and narrower). */
.np-footer__legal { display: none; margin: 0 !important; font-family: var(--np-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--np-subtle) !important; text-align: center; }
@media (max-width: 900px) { .np-footer__legal { display: block; } .np-footer__inner { gap: 24px; } }
.np-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.np-footer__bottom p { margin: 0; font-family: var(--np-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--np-subtle); }

/* ---------- 404 ---------- */

.np-404 { padding-block: 120px; display: flex; flex-direction: column; gap: 24px; }
.np-404 > * { margin: 0 !important; }

/* Phones: the filters stay on one line and swipe sideways, running to the screen edge.
   The right edge fades out as a hint that there's more. From about 520px all four fit. */
@media (max-width: 519px) {
	.np-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		margin-inline: calc(var(--wp--style--root--padding-left) * -1);
		padding-inline: var(--wp--style--root--padding-left);
		scroll-padding-inline: var(--wp--style--root--padding-left);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
	}
	.np-filters::-webkit-scrollbar { display: none; }
	/* Room at the end so the last filter can scroll clear of the fade. */
	.np-filters::after { content: ""; flex: 0 0 32px; }
	.np-filter { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}

/* ---------- Phones: tighter vertical rhythm ---------- */

@media (max-width: 600px) {
	.np-section { padding-block: 48px; }
	.np-film { padding-top: 32px; }
	.np-work { padding-block: 20px 32px; }
	.np-filters { margin-bottom: 20px; }
	.np-brand-intro { padding-bottom: 48px; }
	.np-subsection { padding-bottom: 64px; }
	.np-subsection:last-child { padding-bottom: 0; }
	.np-film.np-section { padding-bottom: 24px; }
	.np-film .np-video--feature { padding-bottom: 0; }
	.np-subsection:has(.np-video--feature) { padding-bottom: 24px; }
	.np-video--feature .np-video__play { width: 64px; height: 64px; }
	.np-video--feature .np-video__play svg { width: 20px; height: 20px; }
	.np-intro, .np-feature { padding-block: 24px 48px; }
	.np-media { padding-bottom: 56px; }
	.np-pager { padding-block: 24px 72px; }
	.np-about { padding-block: 48px 16px; gap: 32px; }
	.np-contact { padding-bottom: 80px; }
	.np-404 { padding-block: 72px; }
	.np-footer { padding-block: 24px 32px; }
}

/* ---------- Editor helpers ---------- */

.block-editor-block-list__layout .np-video a,
.block-editor-block-list__layout .np-tile,
.block-editor-block-list__layout .np-filter,
.block-editor-block-list__layout .np-pager a,
.block-editor-block-list__layout .np-form :is(input, textarea, button) { pointer-events: none; }

.np-editor-hint { font-family: var(--np-mono); font-size: 11px; color: var(--np-subtle); margin-top: 8px; }
.np-video-empty { padding: 24px; border: 1px dashed var(--np-border); border-radius: 4px; color: var(--np-muted); font-size: 14px; }