@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-Variable.woff2") format("woff2");
	font-weight: 300 900;
	font-display: swap;
}

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
}

:root {
	/* colour channels */
	--ground-rgb: 28 18 52;     /* #1C1234 dusk indigo; read by the scene */
	--ink-rgb: 247 244 255;     /* #F7F4FF */
	--mute-rgb: 200 188 236;    /* #C8BCEC */
	--violet-rgb: 98 40 255;    /* #6228FF */
	--signal-rgb: 255 28 202;    /* #FF1CCA */
	--panel-rgb: 22 12 44;      /* #160C2C */

	--ground: rgba(var(--ground-rgb) / 0.75);
	--ink: rgb(var(--ink-rgb));
	--mute: rgb(var(--mute-rgb));
	--violet: rgb(var(--violet-rgb));
	--signal: rgb(var(--signal-rgb));
	--panel: rgb(var(--panel-rgb) / 0.55);
	--panel-solid: rgb(var(--panel-rgb) / 0.92);
	--rule: rgb(var(--ink-rgb) / 0.18);
	--rule-strong: rgb(var(--ink-rgb) / 0.5);
	--shade: rgb(var(--ground-rgb) / 0.85);

	/* type */
	--font-display: "Rubik", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
	--font-body: "Space Grotesk", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
	--font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
	--text-xs: 0.75rem;
	--text-s: 0.875rem;
	--text-m: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-l: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	--text-xl: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
	--track-wide: 0.14em;
	--track-display: 0.02em;

	/* space */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--space-xl: clamp(3rem, 2rem + 4vw, 6rem);
	--space-2xl: clamp(5rem, 3rem + 8vw, 10rem);
	--gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	--stagger: clamp(2rem, 1rem + 6vw, 8rem);
	--measure: 38rem;

	/* safe area */
	--pad-top: env(safe-area-inset-top, 0px);
	--pad-bottom: env(safe-area-inset-bottom, 0px);
	--pad-left: max(var(--gutter), env(safe-area-inset-left, 0px));
	--pad-right: max(var(--gutter), env(safe-area-inset-right, 0px));

	/* sizes / lines */
	--nav-h: 4rem;
	--icon: 1em;
	--menu-w: 24rem;
	--hairline: 1px;
	--rule-heavy: 3px;
	--radius: 24px;

	/* logo */
	--logo-src: url("../img/logo.svg");
	--logo-ratio: 3840 / 1940;
	--splash-logo: clamp(15rem, 52vw, 44rem);
	--nav-logo: 4.25rem;
	--footer-logo: clamp(9rem, 22vw, 18rem);
	--logo-glow: drop-shadow(0 0 0.15rem rgb(var(--ground-rgb) / 0.6)) drop-shadow(0 0 1.5rem rgb(var(--violet-rgb) / 0.7));

	/* icons */
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E");
	--icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4v12.2l-5.6-5.6L4 12l8 8 8-8-1.4-1.4-5.6 5.6V4z'/%3E%3C/svg%3E");

	/* motion (fixed) */
	--ease: linear(0, 0.36 10%, 0.74 22%, 0.96 34%, 1.025 46%, 1.008 62%, 0.998 80%, 1);
	--ease-spring: linear(0, 0.42 12%, 0.84 26%, 1.06 42%, 1.02 58%, 0.99 74%, 1);
	--t-fast: 50ms;
	--t: 150ms;
	--t-slow: 300ms;
	--t-cue: 2s;
	--t-reveal: 600ms;

	/* layers (fixed) */
	--z-bg: -1;
	--z-nav: 50;
	--z-grain: 0;
}

/* ---------- base ---------- */

html {
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 100%;
	overflow-x: clip;
	scroll-behavior: smooth;
}

html:has([data-is="masthead"] > nav) {
	scroll-padding-top: calc(var(--nav-h) + var(--pad-top));
}

body {
	display: flex;
	flex-direction: column;
	min-block-size: var(--vh-static, 100svh);
	font-size: var(--text-m);
	line-height: 1.55;
}

:lang(ja) { font-family: var(--font-ja); font-style: normal; }

a {
	color: inherit;
	text-decoration-thickness: var(--hairline);
	text-underline-offset: 0.2em;
	transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--signal); }

button {
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: var(--hairline) solid var(--signal);
	outline-offset: var(--space-3xs);
}

b { font-weight: 650; }
i { font-style: normal; }
em { font-style: italic; }

h1, h2, h3, h4 { font-weight: 700; }

[data-is="text-logo"] {
	display: block;
	aspect-ratio: var(--logo-ratio);
	background: currentColor;
	mask: var(--logo-src) center / contain no-repeat;
}

/* ---------- masthead ---------- */

[data-is="masthead"] > nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-nav);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	block-size: calc(var(--nav-h) + var(--pad-top));
	padding: var(--pad-top) var(--pad-right) 0 var(--pad-left);
	background: linear-gradient(var(--shade), transparent);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

nav > [data-is="text-logo"] {
	inline-size: var(--nav-logo);
	color: var(--ink);
	transition: color var(--t-fast) var(--ease);
}

nav > [data-is="text-logo"]:hover { color: var(--signal); }

[data-is="menu-button"] {
	padding: var(--space-2xs) var(--space-xs);
	border: var(--hairline) solid var(--rule-strong);
	border-radius: var(--radius);
	text-transform: uppercase;
	letter-spacing: var(--track-wide);
	transition: color var(--t-fast) var(--ease), border-color var(--t) var(--ease), scale var(--t) var(--ease);
}

[data-is="menu-button"]:hover { color: var(--signal); border-color: var(--signal); }
[data-is="menu-button"]:active { scale: 0.96; }

[data-is="nav-menu"] {
	position: fixed;
	inset: 0 0 auto auto;
	margin: 0;
	border: 0;
	overflow: hidden;
	padding: calc(var(--space-xl) + var(--pad-top)) var(--pad-right) calc(var(--space-l) + var(--pad-bottom)) var(--pad-left);
	inline-size: min(100%, var(--menu-w));
	block-size: var(--vh-lock, 100svh);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
	color: var(--ink);
	background: var(--panel-solid);
	backdrop-filter: blur(var(--scene-blur));
	border-inline-start: var(--hairline) solid var(--rule);
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 700;
	text-transform: uppercase;
	opacity: 0;
	translate: 100% 0;
	transition: opacity var(--t) var(--ease), translate var(--t-slow) var(--ease-spring),
	            display var(--t-slow) allow-discrete, overlay var(--t-slow) allow-discrete;
}

[data-is="nav-menu"]::backdrop { background: rgb(var(--ground-rgb) / 0.4); }
[data-is="nav-menu"]:popover-open { display: flex; opacity: 1; translate: 0 0; }

@starting-style {
	[data-is="nav-menu"]:popover-open { opacity: 0; translate: 100% 0; }
}

[data-is="nav-menu"] > a { text-decoration: none; }

[data-is="nav-menu"] > button {
	position: absolute;
	inset-block-start: calc(var(--pad-top) + var(--nav-h) / 2);
	inset-inline-end: var(--pad-right);
	translate: 0 -50%;
	font-family: var(--font-body);
	font-size: var(--text-xs);
}

[data-is="splash"] {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: var(--space-s);
	position: relative;
	block-size: var(--vh-lock, 100svh);
	padding-inline: var(--pad-left) var(--pad-right);
	text-align: center;
}

[data-is="splash"] [data-is="text-logo"] {
	inline-size: var(--splash-logo);
	color: var(--ink);
	filter: var(--logo-glow);
	margin-bottom: calc(-1 * var(--space-l));
	z-index: 100;
}

[data-is="splash"] > p {
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
	text-shadow: 0 0 var(--space-xs) var(--shade);
}

[data-is="scroll-cue"] {
	position: absolute;
	inset: auto 0 calc(var(--space-l) + var(--pad-bottom));
	display: grid;
	justify-items: center;
	gap: var(--space-3xs);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	animation: nudge var(--t-cue) var(--ease) infinite;
}

[data-is="scroll-cue"]::after {
	content: "";
	inline-size: var(--space-s);
	aspect-ratio: 1;
	background: currentColor;
	mask: var(--icon-down) center / contain no-repeat;
}

@keyframes nudge { 50% { translate: 0 var(--space-2xs); } }

/* ---------- main grid ---------- */

main {
	flex: 1;
	display: grid;
	align-content: start;
	align-items: start;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: var(--space-xl);
	padding: var(--space-xl) var(--pad-right) var(--space-2xl) var(--pad-left);
}

main > * { min-width: 0; }

main > :nth-child(odd of :is(article, figure):not([data-is="spec"]))  { grid-column: 1 / span 11; }
main > :nth-child(even of :is(article, figure):not([data-is="spec"])) { grid-column: 2 / -1; }
main > :is([data-is="divider"], [data-is="banner"], [data-is="spec"]) { grid-column: 1 / -1; }

@media (min-width: 40rem) {
	main > :nth-child(odd of :is(article, figure))  { grid-column: 1 / span 8; }
	main > :nth-child(even of :is(article, figure)) { grid-column: 5 / -1; }
}

@media (min-width: 64rem) {
	main > :nth-child(4n+1 of :is(article, figure):not([data-is="spec"])) { grid-column: 1 / span 6; }
	main > :nth-child(4n+2 of :is(article, figure):not([data-is="spec"])) { grid-column: 8 / span 5; margin-block-start: var(--stagger); }
	main > :nth-child(4n+3 of :is(article, figure):not([data-is="spec"])) { grid-column: 2 / span 6; }
	main > :nth-child(4n+4 of :is(article, figure):not([data-is="spec"])) { grid-column: 9 / span 4; margin-block-start: var(--stagger); }
	main > [data-is="spec"] { grid-column: 3 / -3; }
}

/* ---------- blocks ---------- */

main { counter-reset: chapter; }

[data-is="divider"] {
	display: flex;
	align-items: baseline;
	gap: var(--space-s);
	padding-block-end: var(--space-xs);
	padding-block-start: var(--space-2xl);
	border-block-end: var(--hairline) solid var(--rule-strong);
	counter-increment: chapter;
	padding-block-start: var(--space-2xl);
}

[data-is="divider"]::before {
	content: counter(chapter, decimal-leading-zero);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	color: var(--signal);
	display: none;
}

[data-is="divider"] > h2 {
	font-family: var(--font-display);
	font-size: calc(var(--text-xl) * 2);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	line-height: 1.05;
}

main {
	opacity: 1.0; /* set to 0.0 opacity in order to demo 3D scene */
}

figure {
	border-radius: var(--radius);
}

figure img { 
	inline-size: 100%;
	border-radius: var(--radius);
	scale: 1.0;
	transition: scale var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}

article > p > img {
	filter: grayscale(100%);
}

figure a:is(:hover, :focus-visible) img {
	scale: 0.98;
	box-shadow: 0px 0px 20px var(--signal); 
}

main > article {
	display: grid;
	gap: var(--space-s);
	padding: var(--space-m);
	background: var(--panel);
	border: var(--hairline) solid var(--rule);
	border-block-start: var(--rule-heavy) solid var(--violet);
	border-radius: var(--radius);
}

main > [data-is="card"] { max-inline-size: calc(var(--measure) + 2 * var(--space-m)); }

article > h3, article > h4 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: var(--track-display);
	line-height: 1.15;
	text-transform: uppercase;
}

[data-is="meta"] {
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--mute);
}

[data-is="standfirst"] {
	font-size: var(--text-l);
	line-height: 1.3;
	color: var(--signal);
}

[data-is="cta"] {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-s);
	color: var(--ink);
	background: var(--signal);
	border-radius: var(--radius);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--t) var(--ease), scale var(--t) var(--ease);
}

[data-is="cta"]::after {
	content: "";
	inline-size: var(--icon);
	aspect-ratio: 1;
	background: currentColor;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: translate var(--t-slow) var(--ease-spring);
}

[data-is="cta"]:hover { color: var(--ink); background: var(--violet); }
[data-is="cta"]:hover::after { translate: var(--space-3xs) 0; }
[data-is="cta"]:active { scale: 0.97; }

[data-is="spec"] [role="list"] { display: grid; }

[data-is="spec"] [role="listitem"] {
	display: grid;
	gap: var(--space-3xs) var(--space-s);
	padding-block: var(--space-xs);
	border-block-start: var(--hairline) solid var(--rule);
}

@media (min-width: 64rem) {
	[data-is="spec"] [role="listitem"] { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}

[data-is="spec"] [role="listitem"] > p:first-child {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--signal);
}

[data-is="banner"] {
	display: grid;
	gap: var(--space-m);
	justify-items: start;
	margin-inline: calc(-1 * var(--pad-left)) calc(-1 * var(--pad-right));
	padding: var(--space-l) var(--pad-right) var(--space-l) var(--pad-left);
	background: linear-gradient(100deg, rgb(var(--violet-rgb) / 0.85), rgb(var(--violet-rgb) / 0.35));
	backdrop-filter: blur(var(--scene-blur));
}

[data-is="banner"] > p {
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	max-inline-size: 40ch;
}

[data-is="splash"] > [data-is="banner"] {
	justify-self: stretch;
	text-align: start;
}

@media (min-width: 64rem) {
	[data-is="banner"] {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}
}

/* ---------- footer ---------- */

[data-is="footer"] {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--space-l) var(--gutter);
	padding: var(--space-2xl) var(--pad-right) calc(var(--space-l) + var(--pad-bottom)) var(--pad-left);
	background: linear-gradient(transparent, var(--ground) var(--space-xl));
	font-size: var(--text-s);
	margin-block-start: calc(3 * var(--space-2xl));
}

[data-is="large-logo"] {
	inline-size: var(--footer-logo);
	aspect-ratio: var(--logo-ratio);
	background: var(--signal);
	mask: var(--logo-src) right center / contain no-repeat;
	margin-inline-start: auto;
}

[data-is="footer"] h4 {
	margin-block-end: var(--space-xs);
	font-size: calc(var(--text-xs) * 2);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--mute);
}

[data-is="footer-links"] { display: grid; gap: var(--space-3xs); }
[data-is="footer-links"] > a { text-decoration: none; }

[data-is="copyright"] {
	align-self: stretch;
	padding-block-start: var(--space-s);
	border-block-start: var(--hairline) solid var(--rule);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--mute);
}

@media (min-width: 40rem) {
	[data-is="footer"] { flex-direction: row; flex-wrap: wrap; }
	[data-is="copyright"] { flex-basis: 100%; }
}

/* ---------- reveal + motion prefs ---------- */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	main > :not([data-revealed]) { opacity: 0; }
	main > [data-revealed] { animation: reveal var(--t-reveal) var(--ease) var(--reveal-delay, 0ms) both; }
}

@keyframes reveal {
	from { opacity: 0; translate: 0 var(--space-m); }
	to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-is="scroll-cue"] { animation: none; }
}