@charset "utf-8";

/* =====================================================================
   II — I Institute (Isobe Institute)
   Global base: font-face, tokens, reset, typography primitives.

   Derived from the Office site's base.css (Dev/OTIF/static/css/base.css)
   and its "Stratum Naming" conventions:
     - Page / block names: PascalCase (main.Works, section.Colophon)
     - Wrappers lowercase (.wrapper, .container, .box)
     - State: .is-* / .has-*
   Deliberately NOT carried over from Office (known pitfalls there):
     - color / palt set directly on every div/span/p (breaks inheritance
       and ligatures) — color is inherited from body here.
     - `overflow-y: auto !important; height: auto !important` on html/body
       — II's PC layout locks page scroll on the archive index.
     - global `section { padding-inline }` — layouts own their gutters.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Font faces
   Elio (II's Latin face) ships 149 glyphs as of VF16 — no ©, /, &, @, ;,
   ?, curly quotes etc. Those fall back per-glyph to Norma (Office's Latin
   face), the next family in every stack below.
   Japanese matches Office: 石井ゴシック R (TypeSquare) ahead of Tazugane
   (FONTPLUS), both loaded from app.html.
   Bump ?v= here AND in app.html's preload when a font file changes.
   --------------------------------------------------------------------- */
@font-face {
	font-family: 'Elio';
	src: url('/fonts/Elio-VF16.woff2?v=16') format('woff2-variations');
	font-weight: 150 950;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Norma by AUGUST.tf VF09';
	src: url('/fonts/Norma-VF09.woff2?v=09') format('woff2');
	font-weight: 1 950;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------
   Tokens — SP first (Figma SP frames are 393px wide), PC from 1024px
   (Figma PC frames are 1440 × 900).
   --------------------------------------------------------------------- */
:root {
	/* Colors */
	--color-bg: #ffffff;
	--color-text: #000000;
	--color-text-mute: rgba(0, 0, 0, 0.3);
	--color-tile: #cfcfcf; /* image placeholder behind masonry / gallery media */
	--color-logo-on-image: #f1f0ef; /* II mark over the OP photograph */
	--color-scrim: rgba(0, 0, 0, 0.65); /* menu backdrop */

	/* Type stacks */
	--font-en: 'Elio', 'Norma by AUGUST.tf VF09', 'Helvetica Neue', Arial, sans-serif;
	--font-ja: 'Elio', 'Norma by AUGUST.tf VF09', 'Ishii Gothic R', TazuganeGothicStdN-Book,
		'TazuganeGothicStdN-Book', 'Tazugane Gothic StdN', 'Tazugane Gothic', 'Hiragino Sans',
		'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;

	/* Weights — Elio VF16's named instances (Regular 450 / Medium 550).
	   Single source of truth: components never hardcode a wght. */
	--fw-regular: 450;
	--fw-medium: 550;
	--fw-eyebrow: var(--fw-regular); /* Figma SP: Elio Regular 10px */

	/* Tracking */
	--tracking-title: 0.05em; /* all uppercase display text */
	--tracking-body: 0.01em;

	/* Type scale (SP) */
	--fs-title: 32px; /* page title (aside) */
	--fs-eyebrow: 10px; /* small uppercase line above the title */
	--fs-subtitle: 24px; /* in-page section heads (lead, Colophon) */
	--fs-menu: 24px;
	--fs-body: 11px;
	--fs-meta: 9px; /* legal / copyright */
	--fs-colophon-label: 12px;
	--fs-colophon-value: 14px;
	--fs-brand: 18px; /* "ISOBE INSTITUTE" under the footer mark */

	--lh-title: 1.2;
	--lh-body: 1.5;
	--lh-ja: 1.8;
	--lh-colophon: 30px;

	/* Layout */
	--gutter: 20px;
	--tile-gap: 2px; /* white hairline between masonry / gallery tiles */
	--aside-w: 100%;
	--header-h: 76px;
	--measure: 353px; /* SP text column */

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-silk: cubic-bezier(0.76, 0, 0.24, 1);

	/* Z */
	--z-content: 1;
	--z-header: 20;
	--z-menu: 40;
	--z-op: 100;
}

@media (min-width: 1024px) {
	:root {
		--fs-title: 42px;
		--fs-eyebrow: 9px;
		--fw-eyebrow: var(--fw-medium); /* Figma PC: Elio Medium 9px */
		--fs-subtitle: 32px;
		--fs-menu: 32px;
		--fs-body: 16px;
		--fs-colophon-label: 14px;
		--fs-colophon-value: 16px;

		--lh-body: 1.4;
		--lh-colophon: 36px;
		--tracking-body: 0;

		/* Figma PC: the left panel ends at x=455 of 1440 (31.6%). */
		--aside-w: calc(455 / 1440 * 100vw);
		--measure: 537px;
	}
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background: var(--color-bg);
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-en);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--tracking-body);
	/* clip, not hidden — hidden turns body into a scroll container and
	   breaks position:sticky (the About image relies on it). */
	overflow-x: clip;
}

/* Archive index on PC: the page itself never scrolls (the masonry moves
   instead). Toggled by the index route. */
html.is-scroll-locked,
html.is-scroll-locked body {
	overflow: hidden;
	height: 100%;
}

/* Menu open: nothing behind the sheet scrolls (touch swipes and wheel over
   the scrim used to chain through to the page). Toggled by Menu.svelte. */
html.is-menu-open,
html.is-menu-open body {
	overflow: hidden;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

video {
	background-color: var(--color-bg);
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	background: transparent;
	border: none;
	outline: none;
}

button {
	cursor: pointer;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

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

/* ---------------------------------------------------------------------
   Typography primitives
   --------------------------------------------------------------------- */

/* Uppercase display text — titles, eyebrows, menu, section heads.
   5% tracking + uppercase per the II type rule. */
.t-title,
.t-eyebrow,
.t-subtitle,
.t-menu {
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	line-height: var(--lh-title);
}

.t-title {
	font-size: var(--fs-title);
	font-weight: var(--fw-medium);
}

.t-eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-eyebrow);
}

.t-subtitle {
	font-size: var(--fs-subtitle);
	font-weight: var(--fw-medium);
}

.t-menu {
	font-size: var(--fs-menu);
	font-weight: var(--fw-medium);
}

.t-meta {
	font-size: var(--fs-meta);
	line-height: 1.2;
	letter-spacing: 0;
}

.t-body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--tracking-body);
}

:lang(ja) {
	font-family: var(--font-ja);
	line-height: var(--lh-ja);
	letter-spacing: 0.02em;
	font-feature-settings: 'palt' 1;
}

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sp {
	display: block;
}

.pc {
	display: none;
}

@media (min-width: 1024px) {
	.sp {
		display: none;
	}

	.pc {
		display: block;
	}
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Page transitions (View Transitions API — see +layout.svelte). */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

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