/* https://piccalil.li/blog/a-modern-css-reset */
*,::after,::before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}

/* General setup */

:root {
  --font-base:	clamp(16px, 1.5vw, 24px );
  --font-lg:		clamp(22px, 1.6vw, 36px );
  --font-xl: 		clamp(22px, 2.2vw, 56px );
  --font-2xl: 	clamp(36px, 4vw, 80px );
  --font-2xl-uppercased: 	clamp(24px, 3vw, 60px );
  --font-hero: 	clamp(32px, 3vw, 56px );

  --font-family-standard: 'ClashGrotesk-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-display: 'ClashDisplay-Semibold', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-display-regular: 'ClashDisplay-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --vertical-padding: clamp(60px, 10vw, 120px);
  --vertical-padding-large: 10vh;
  --general-margin: 20px;

  --white: #fff;
  --black: #323940;
  --black-hover: #32394011;
  --black-button-hover: #323940cc;
  --main-bg: #F1F5F9;

  --gallery-columns: 2;
}

/* Large screens */
@media screen and (min-width: 1480px) {
	:root {
		--gallery-columns: 3;
		--vertical-padding: clamp(60px, 10vw, 200px);
	}
}

/* Mobile */
@media screen and (max-width: 768px) {
	:root {
		--gallery-columns: 1;
		--vertical-padding-large: 5vh;
	}
}


/* https://stackoverflow.com/a/62165035 */
body {
  touch-action: pan-x pan-y;
	font-family: var(--font-family-standard);
	-webkit-font-smoothing: antialiased;
	background: var(--main-bg);
	font-size: var(--font-base);
	color: var(--black);
}

@view-transition {
  navigation: auto;
}


html body * {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration: none;
}

img, video {
	width: 100%;
	height: auto;
}

ul {
	padding: 0 20px;
}





/* Typography */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	font-size: var(--font-xl);
	font-family: var(--font-family-display-regular);
}

h1 {
	font-family: var(--font-family-display);
	font-size: var(--font-2xl);
}

h1.work {
	font-size: var(--font-2xl-uppercased);
}

p {
}





/* Helpers */
.margins {
	margin: 0 20px;
	line-height: 0; /* Hack to avoid extra gap? */
}

.hidden {
	display: none;
}





/* Common components */
.btn {
	background: var(--black);
	color: var(--white);
	padding: 8px 20px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	gap: 8px;
}

.btn svg {
	position: relative;
}

.btn.inverted {
	background: transparent;
	color: var(--black);
	border: 1px solid var(--black);
}





header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 30px var(--general-margin);
	position: fixed;
	top: 0;
	width: 100%;
	background: #F1F5F999;
	backdrop-filter: blur(10px);
	z-index: 1;
}

.header-spacer {
	height: 125px;
	display: block;
}

header .logo {
	line-height: 1;
	flex-grow: 1;
	z-index: 9;
}

header .logo svg {
	width: 150px;
	height: auto;
}

header nav ul {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	gap: 20px;
	margin-right:20px;
}

header nav.mobile {
	display: none;
}

header nav ul.mobile-menu {
	display: none;
}

header nav ul .active {
	text-decoration: none;
}

header #menuButton {
	display: none;
}






/* HERO */
.hero {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
	gap: 20px;
}

.hero,
.home.content-blocks .block-split:not(.highlight),
.home.content-blocks .block-media:not(.highlight),
.instagram,
footer {
	padding-block: var(--vertical-padding-large);
}

.hero h1 {
	grid-column: 2 / 5;
	padding-right: 40px; /* Watch not too close to media */
	font-family: var(--font-family-display-regular);
	font-size: var(--font-hero);
}

.hero .media {
	grid-column: 5 / -2;
	width: 100%;
}




/* Content blocks */
.content-blocks:not(.no-space)>* {
	margin-block-start: var(--vertical-padding);
}

.content-blocks > *:first-of-type {
	margin-block-start: var(--vertical-padding);
}

.content-block.highlight {
	background: white;
}

.content-block.highlight .media {
	padding: 20px;
}

.content-blocks .content-block.reverse > .text {
	grid-column: 2 / span 4;
}
.content-blocks .content-block.reverse > .media {
	grid-column: 7 / span 6;
}

.content-blocks .content-block.reverse > .media.tall {
	grid-column: 9 / span 4;
}

.content-blocks .content-block.reverse > .text.tall {
	grid-column: 2 / span 6;
}

.media figcaption {
	margin-top: 10px;
	opacity: .5;
}


.no-space .content-block {
	gap:0;
}

.no-space .content-block .text {
	padding-block: 20px;
}

.content-block {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	align-items: center;
	line-height: 1.4;
}

.content-block.block-split > .media {
	grid-row: 1;
	grid-column: 1 / span 6;
	width: 100%;
}

.content-block.block-split > .media.tall {
	grid-column: 1 / span 4;
}

.content-block.block-split > .text {
	grid-row: 1;
	grid-column: 8 / span 4;
}

.content-block.block-split > .text.tall {
	grid-column: 6 / span 6;
}

.content-block .text > * {
	text-box-trim: trim-both; /* no firefox support per sept 2025 */
}

.content-block .text .rich-text > * + * {
	margin-block-start: 16px;
}

.content-block .text .rich-text > * + h1,
.content-block .text .rich-text > * + h2,
.content-block .text .rich-text > * + h3,
.content-block .text .rich-text > * + h4,
.content-block .text .rich-text > * + h5 {
	margin-block-start: 48px;
}

.content-block .text > .btn {
	margin-block-start: 32px;
}

.content-block.block-media .media {
	grid-column: 1 / -1;
}


/* Pure text block */
.content-block.block-text>div {
	grid-column: 4 / 10;
	padding-block: var(--vertical-padding);
}


/* Gallery Block */
.galleryOuter {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
}

.gallery {
	width: unset;
	grid-column: 1 / -1;
	column-count: var(--gallery-columns);
	column-gap: var(--general-margin);
	margin-inline: var(--general-margin);
 }

 .gallery figure {
 	margin-bottom: var(--general-margin);
 }





/* Default pages */
.intro {
	margin-inline: 20px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto auto;
	column-gap: 20px;
	row-gap: 0;
	margin-top: 40px;
}

.intro * {
	text-box-trim: trim-both; /* no firefox support per sept 2025 */
}

.intro div.breadcrumbs,
.intro h1 {
	grid-column: 1 / 7;
}

.intro .breadcrumbs {
	grid-row: 1 / 2;
}

.intro h1,
.intro div.lead {
	grid-row: 2 / -1;
}

.lead .meta {
	margin-top: 40px;
	font-size: var(--font-base);
}

.meta span {
	opacity: .6;
	margin-right: 20px;
	min-width: calc(70px + 1vw);
	display: inline-block;
}

.intro div.lead {
	grid-column: 7 / -1;
	font-size: var(--font-lg);
	line-height: 1.35;
}

.main_image {
	margin-inline: 20px;
}





/* Instagram */

.instagram {
	margin-top: var(--vertical-padding);
	margin-inline: 20px;
}

.instagram h3 {
	margin-bottom: 20px;
}

.instafeed {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap:20px;
}

.instafeed a {
	grid-column: span 2;
}





/* WORK */
.projects {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	margin-top: 80px;
	padding-inline: 20px;
}

.project_categories {
	grid-column: 1 / -1;
}

.project_categories button {
	border: 1px solid var(--black);
	cursor: pointer;
	color: inherit;
	background: transparent;
}

.project_categories button.active {
	background-color: var(--black) ;
	color: var(--white) ;
}

.btn:hover {
	background: var(--black-button-hover);
}

header .btn:not(.active):hover,
.projects .btn:not(.active):hover {
	background: var(--black-hover);
}



.project_list {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
}

.projects a {
	grid-column: span 6;
	position: relative;
	width: 100%;
}

.projects a::after,
.projects a h2 {
	visibility: hidden;
	opacity:0;
	transition: all .2s ease-out;
}

.projects a:hover::after,
.projects a:hover h2 {
	visibility: visible;
	opacity:1;
}

.projects a h2 { transform: translateY(10px) }
.projects a:hover h2 { transform: translateY(0) }

.projects a::after {
	content: "";
	display: block;
	background: linear-gradient(transparent 50%, #1E293B);
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
	visibility: hidden;
}

.projects a h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 20px;
	font-family: var(--font-family-display);
	font-size: var(--font-xl);
	color: var(--white);
	z-index: 2;
}





/* Footer */
footer {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap:20px;
	margin-inline: 20px;
	margin-top: var(--vertical-padding); /* denne dobler avstand opp fra normalen */
	padding-top: var(--vertical-padding);
}

footer div > * + * {
	margin-block-start: 20px;
}

footer .logo {
	grid-column: 1 / span 6;
}

footer .logo svg {
	width: 150px;
	height: auto;
}

footer div:nth-of-type(2) {
	grid-column: 7 / span 3;
}

footer div:nth-of-type(3) {
	grid-column: 10 / span 3;
}

footer .copy {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: var(--vertical-padding);
	margin-bottom: 20px;
}







/* MARQUEE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  margin: var(--vertical-padding) 0
}

.marquee-item {
  width: calc( 60px + 6vw);
  height: calc( 60px + 4vw);
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
}

@media (min-width: 700px) {
  .marquee-item {
    padding: 30px;
  }
}






/* Grids: inspired by Ariel Salminen */

.grid-active .guides *,
.grid-active .guides * ::before,
.grid-active .guides * ::after {
  outline: 1px solid #000;
  mask-image: none
}

.guides {
  position: fixed;
  block-size: 100%;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
  padding: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  padding-inline: 20px;
}

.grid-active .guides {
  opacity: 1;
}

.grid-active .guide {
  box-shadow: 0 0 0 20px rgba(0,0,0, .1);
}

.guides-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  grid-template-rows: 1fr;
  position: relative;
  block-size: 100%;
}



@media screen and (min-width: 1920px) {

	.outer-highlight, .outer-no-highlight {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 20px;
		margin-inline: 20px;
	}

	.outer-highlight > div, .outer-no-highlight > div {
		grid-column: 2 / span 10;
		padding: 0 !important;
		grid-template-columns: repeat(10, 1fr);
		margin-inline: 0px;
	}

	.outer-no-highlight > div > .media {
		padding:0 !important;
	}

	.content-blocks .content-block > .media {
		padding: 20px;
		grid-column: 1 / span 5;
	}

	.content-blocks .content-block > .media.tall {
		padding: 20px;
		grid-column: 1 / span 3;
	}

	.content-blocks .content-block.reverse > .media {
		grid-column: 5 / span 5;
	}

	.content-blocks .content-block.reverse > .media {
		grid-column: 6 / span 5;
	}

	.content-blocks .content-block.reverse > .media.tall {
		grid-column: 8 / span 3;
	}

	.content-blocks .content-block.reverse > .text {
		grid-column: 2 / span 3;
	}

	.content-blocks .content-block.reverse > .text.tall {
		grid-column: 2 / span 5;
	}


	.content-block.block-text>div {
		grid-column: 5 / 9;
	}

	.content-block.block-split > .text {
		grid-column: 7 / -2;
	}

	.content-block.block-split > .text.tall {
		grid-column: 5 / span 5;
	}

	.content-block.block-split > .text.tall {
		grid-column: 5 / span 5;
	}

	.content-block.block-media .media {
		grid-column: 2 / 12;
	}

	.intro div.breadcrumbs, .intro h1 {
		grid-column: 2 / 6;
	}

	.intro div.lead {
		grid-column: 7 / 12;
	}

	.project_categories {
		grid-column: 2 / span 10;
	}

	.project_list {
		grid-column: 2 / span 10;
		grid-template-columns: repeat(10, 1fr);
	}

	.projects a {
		grid-column: span 5;
	}

	.main_image {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 20px;
	}

	.main_image img {
		grid-column: 2 / span 10;
	}

	.gallery {
		grid-column: 2 / span 10;
	}

	footer .logo {
		grid-column: 2 / span 4;
	}

	footer div:nth-of-type(2) {
		grid-column-start: 6;
	}

	footer div:nth-of-type(3) {
		grid-column-start: 9;
	}

	.galleryOuter.max_cols-4 .gallery {
			column-count: 4;
	}

	.intro {
		padding-block-start: var(vertical-padding-large);
	}

	.instagram {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 20px;
	}

	.instagram h3 {
		grid-column: 2 / 12;
	}

	.instafeed {
		grid-column: 2 / 12;
		grid-template-columns: repeat(10, 1fr);
	}

	.instafeed a:last-of-type {
		display: none;
	}



}




@media screen and (max-width: 768px) {

	header {
		flex-wrap: wrap;
		gap: 0;
		padding: 10px 20px;
		position: fixed;
		width: 100%;
		background: #F1F5F999;
		backdrop-filter: blur(10px);
		z-index: 1;
		top:0;
	}

	.header-spacer {
		height: 16px;
	}

	header + *:not(.hero)::before {
		content:" ";
		margin-top: 120px;
		display: block;
	}

	/* Because of column-reverse its after */
	header + *.hero::after {
		content:" ";
		margin-top: 120px;
		display: block;
	}

	.intro {
		margin-top: 0;
	}

	.intro div.breadcrumbs {
		margin-bottom: 10px;
	}

	.hero h1 {
		padding-right: 0;
	}

	header .logo {
		flex-grow: 1;
	}

	header .logo svg,
	footer .logo svg {
		width: 100px;
		height: auto;
	}

	header nav {
		position: fixed;
		top: 0;
		right: 0;
		padding-top: 40px;
		width: 100%;
		z-index: 3;
	}

	header #menuButton {
		display: block;
		top: 0;
		right: 0;
		z-index: 4;
		width: 60px;
		height: 60px;
		border: none;
		background: transparent;
		color: var(--black);
	}

	header #menuButton {
		padding: 10px;
	}

	header nav ul:not(.mobile-menu) {
		display: none;
	}

	header nav.mobile {
		display: block;
	}

	header nav.mobile.active {
		background: white;
	}

	header nav ul.mobile-menu {
		display: flex;
		flex-direction: column;
		align-items: end;
		gap: 0px;
		font-size: var(--font-hero);
		font-family: var(--font-family-display-regular);
		font-weight: 700;
	}

	header nav.mobile ul.mobile-menu.hidden {
		display: none;
	}

	header .btn.desktop {
		display: none;
	}

	header .btn:not(.desktop) {
		margin-top: 20px;
		font-size: var(--font-lg);
	}


	.hero {
		display: flex;
		flex-direction: column-reverse;
		align-items: start;
		padding-block: 80px;
	}

	.content-block {
		display: flex;
		flex-direction: column;
	}

	.content-blocks>* {
		margin-block-start: var(--vertical-padding);
	}

	.content-block.highlight {
		padding: 20px;
	}

	.content-block.highlight .media {
		padding: 0;
	}

	.instafeed {
		grid-template-columns: repeat(6, 1fr);
	}

	.intro, footer {
		display: flex;
		flex-direction: column;
	}

	.intro h1 {
		margin-bottom: 20px;
	}


	.projects a {
		grid-column: 1 / -1;
	}

	.projects a::after,
	.projects a h2 {
		visibility: visible;
		opacity:1;
	}

	.projects a h2 { transform: translateY(0) }
	.projects a:hover h2 { transform: translateY(0) }

	.projects a::after {
		content: "";
		display: block;
		background: linear-gradient(transparent 50%, #1E293B);
		position: absolute;
		inset: 0;
		mix-blend-mode: multiply;
		visibility: visible;
	}

	.projects a h2 {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 12px;
		font-family: var(--font-family-display);
		font-size: var(--font-xl);
		color: var(--white);
		z-index: 2;
		overflow-wrap: anywhere;
	}



	footer .copy {
		text-align: left;
	}


}