/* Fiona Lebre — base styles. Grille 6 colonnes / 9 lignes (Figma). */

/* ------------------------------------------------------------------ */
/* Fonts — Hagel (dépose les .woff dans /fonts/, noms exacts ci-dessous) */
/* ------------------------------------------------------------------ */

@font-face {
	font-family: 'Hagel';
	src: url('../fonts/Hagel-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Hagel';
	src: url('../fonts/Hagel-RegularItalic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Hagel Mono';
	src: url('../fonts/Hagel-Mono.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Prairie Sans';
	src: url('../fonts/Prairie-Sans.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* EB Garamond — nav du header + ligne 2 de la légende. */
@font-face {
	font-family: 'EB Garamond';
	src: url('../fonts/EBGaramond-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'EB Garamond';
	src: url('../fonts/EBGaramond-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	--color-text: #111111;
	/* Noir à 75% — index des projets au repos, ligne 2 de la légende. Le
	   fond étant blanc, l'alpha donne exactement le même rendu qu'un
	   aplat gris, tout en restant lié au noir du texte. */
	--color-text-muted: rgba( 17, 17, 17, 0.75 );
	--color-bg: #ffffff;
	--color-accent: #a62411;
	--font-serif: 'Hagel', 'EB Garamond', serif;
	--font-mono: 'Hagel Mono', 'IBM Plex Mono', monospace;
	--font-garamond: 'EB Garamond', serif;
	/* Prairie Sans : plus utilisé depuis que la ligne 1 de la légende est
	   passée en Hagel Mono. Conservé (le @font-face ne télécharge rien
	   tant qu'aucune règle ne l'appelle) au cas où on y revienne. */
	--font-caption: 'Prairie Sans', 'Hagel', sans-serif;
	/* Règle typo : le Hagel regular italic est TOUJOURS tracké à 10%.
	   Appliqué via .fl-italic (et les sélecteurs qui l'utilisent déjà) —
	   pas de sélecteur CSS possible sur "font-style calculé", donc on
	   passe par cette variable partout où l'italique est posé. */
	--letter-spacing-italic: 0.1em;
	--grid-columns: 6;
	--grid-gap: 24px;
	--grid-margin: 20px;
	/* La zone d'image de la home s'arrête d'autant avant le bas de
	   .home-work (= avant la row 9). S'ajoute aux 20px qui séparent déjà
	   la légende du bas de .home-work, d'où 40px entre le bas d'une
	   image portrait et la légende. Lu aussi par applyImageSize() en JS
	   pour calculer la hauteur — une seule source de vérité. */
	--image-bottom-gap: 20px;
	/* Flou du fondu enchaîné entre deux images du carrousel : l'image
	   sortante se défocalise en s'effaçant, l'entrante arrive floue et
	   se refocalise. */
	--image-blur: 14px;
	/* Courbe de la mise au point. Contrairement à ease-in-out (symétrique,
	   qui ralentit aussi au DÉPART), celle-ci part franchement et s'étire
	   longuement en fin de course : la netteté s'installe progressivement,
	   comme une bague d'objectif qu'on relâche. */
	--ease-focus: cubic-bezier( 0.16, 1, 0.3, 1 );
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ */
/* Transitions de page (Home <-> About <-> Overview)                   */
/* ------------------------------------------------------------------ */

/* View Transitions natives : le navigateur garde un instantané de la
   page sortante et fait un vrai crossfade avec la page entrante, sans
   JS et sans flash de page blanche. Chrome/Safari récents uniquement —
   les autres navigateurs ignorent la règle et prennent le fallback JS
   (classe .fl-page-leave, cf. js/main.js). */
@view-transition {
	navigation: auto;
}

/* Les deux instantanés (sortant + entrant) sont superposés et animés en
   même temps : à mi-parcours les deux pages sont visibles à 50%, d'où le
   fondu enchaîné. La sortante reste au-dessus par défaut, on force donc
   des opacités explicites pour que le recouvrement soit vraiment doux
   plutôt qu'un simple "l'ancienne disparaît, la nouvelle apparaît". */
::view-transition-old(root) {
	animation: fl-cross-out 0.7s ease-in-out both;
}

::view-transition-new(root) {
	animation: fl-cross-in 0.7s ease-in-out both;
}

@keyframes fl-cross-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes fl-cross-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Fallback (navigateurs sans View Transitions natives, Firefox
   notamment) : impossible d'afficher deux documents à la fois, on
   simule donc le crossfade en deux temps — fondu sortant au clic
   (classe posée par le JS, cf. js/main.js), puis fondu entrant au
   chargement de la page suivante. Les durées se recouvrent
   perceptuellement et donnent le même effet de fondu enchaîné. */
body {
	transition: opacity 0.45s ease-in-out;
}

body.fl-page-leave {
	opacity: 0;
}

/* Le fondu entrant est en CSS pur (pas de JS) : le script étant chargé
   en fin de body, une classe posée en JS arriverait après le premier
   rendu et provoquerait un flash. Ciblé via @supports pour ne pas
   doubler l'animation là où les View Transitions s'en chargent déjà.

   fill-mode "backwards" (et surtout PAS "both"/"forwards") : une
   animation qui persiste après sa fin prend le pas sur les transitions,
   ce qui figerait l'opacité et empêcherait le fondu sortant
   (.fl-page-leave) de jouer au clic suivant. Ici l'état de départ est
   appliqué avant le démarrage — donc pas de flash — et plus aucune
   contrainte une fois l'animation terminée. */
@supports not (view-transition-name: none) {
	body {
		animation: fl-cross-in 0.5s ease-in-out backwards;
	}
}

/* Respecte le réglage système "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}

	body {
		transition: none;
		animation: none;
	}

	body.fl-page-leave {
		opacity: 1;
	}
}

body {
	margin: 0;
	font-family: var(--font-serif);
	color: var(--color-text);
	background: var(--color-bg);
	font-size: 12px;
	line-height: 1.4;
}

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

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

/* Hagel regular italic — toujours tracké à 10%. À réutiliser sur tout
   nouvel élément en italique plutôt que de re-déclarer le letter-spacing
   à la main (cf. --letter-spacing-italic). */
.fl-italic,
em,
i {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: var(--letter-spacing-italic);
}

/* ------------------------------------------------------------------ */
/* Grille globale 6 colonnes                                          */
/* ------------------------------------------------------------------ */

.site-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	column-gap: var(--grid-gap);
	padding: 0 var(--grid-margin);
}

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

.site-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--grid-margin) var(--grid-margin) 0;
}

.site-title,
.site-logo {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-italic);
}

.site-nav ul {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-garamond);
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
}

.site-nav a {
	transition: color 0.6s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* Home — page verrouillée (pas de scroll), index gauche, image        */
/* centrée, légende. body.fl-home ajouté uniquement sur la home.       */
/* ------------------------------------------------------------------ */

html:has(body.fl-home) {
	height: 100%;
	overflow: hidden;
}

body.fl-home {
	height: 100vh;
	overflow: hidden;
	position: relative; /* ancre .site-header sorti du flux, cf. plus bas */
}

/* WordPress ajoute la barre d'admin (fixe, 32px desktop / 46px mobile) en
   poussant <html> vers le bas via margin-top quand on est connecté (classe
   body "admin-bar") — sans ce correctif, les 100vh de la home verrouillée
   débordent du viewport visible d'exactement cette hauteur, et le bas de
   la grille (marge + row 9) se retrouve invisible (coupé par
   overflow:hidden, sans scrollbar). Visiteur déconnecté = pas d'impact. */
body.fl-home.admin-bar {
	height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	body.fl-home.admin-bar {
		height: calc(100vh - 46px);
	}
}

/* Le header est SORTI DU FLUX et superposé à la row 1 de la grille.
   Sinon (header en flex au-dessus de <main>) sa hauteur — padding 20px +
   la ligne de texte, ~37px — s'ajoute AU-DESSUS de la grille : celle-ci
   ne fait plus 100vh mais 100vh - 37px, et démarre 37px plus bas. Comme
   rien ne compense en bas (le footer est masqué sur la home), toute la
   grille est décalée vers le bas et l'image, pourtant bien centrée dans
   .home-work, se retrouve visuellement ~37px trop basse : d'où
   l'impression d'une marge en haut et pas en bas. Ici la grille occupe
   exactement le viewport et la row 1 accueille le titre + la nav (le
   padding-top du header = le padding de la grille, donc ça s'aligne). */
body.fl-home .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

body.fl-home .site-main.front-page {
	height: 100%;
	min-height: 0;
	overflow: hidden;
	position: relative; /* ancre l'overlay de debug grille (.fl-grid-debug) */
}

/* Le footer (copyright) mange de la hauteur flex et crée un faux
   surplus de marge en bas sur la home verrouillée — masqué ici. */
body.fl-home .site-footer {
	display: none;
}

/* Grille interne 6 colonnes x 9 lignes (dans les marges). Le menu et le
   travail (image) démarrent tous les deux à la row 2 et s'étendent
   jusqu'à la row 8 — soit 7 rows. La row 1 reste libre en haut,
   symétrique de la row 9 libre en bas (qui accueille la légende) : 1 row
   de marge de chaque côté. */
.home-layout {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	grid-template-rows: repeat(9, 1fr);
	column-gap: var(--grid-gap);
	padding: var(--grid-margin);
	height: 100%;
	min-height: 0;
}

.home-index {
	grid-column: 1 / 2;
	grid-row: 2 / 9;
	align-self: start;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.8;
}

.home-index a {
	display: block;
	cursor: pointer;
	color: var(--color-text-muted);
	transition: color 0.6s ease;
}

.home-index a:hover {
	color: var(--color-text);
}

/* Le projet mis en avant reste rouge. Règle placée APRÈS le :hover : à
   spécificité égale c'est la dernière qui gagne, donc survoler
   l'élément surligné ne le fait pas basculer au noir. */
.home-index a[aria-current="true"],
.home-index a.is-highlighted {
	color: var(--color-accent);
}

.home-work {
	grid-column: 3 / 5;
	grid-row: 2 / 9;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

/* Vrai crossfade : deux <img> superposées (voir js/main.js). L'ancienne
   reste visible pendant que la nouvelle apparaît par-dessus — jamais de
   moment totalement transparent, contrairement à un fade-out puis
   fade-in séquentiel sur une seule image (qui donne un effet de
   clignotement). */
/* Centrée dans la zone d'image — jamais ancrée en haut/bas/gauche/droite.
   Largeur ET hauteur sont fixées en JS via style inline (voir
   applyImageSize() dans js/main.js) à partir du ratio réel de l'image :
   hauteur = toute la zone (portrait) ou 5 rows (paysage), largeur =
   hauteur * ratio naturel — jamais de max-width qui viendrait
   re-comprimer la hauteur (l'ancien bug : max-width:100% + width:auto
   forçait le navigateur à réduire la hauteur pour les images larges/au
   resize).
   La légende, elle, ne suit PAS le bord bas de l'image : sa position est
   fixe (cf. .home-caption plus bas), donc identique d'un projet à
   l'autre quel que soit le format. */
.fl-home-img {
	position: absolute;
	/* Centrage par translation, et NON via "inset:0 + margin:auto" :
	   cette dernière technique ne centre que tant que l'élément est plus
	   ÉTROIT que son conteneur. Une image paysage (5 rows de haut) est
	   souvent plus large que les 2 colonnes de .home-work ; le cas est
	   alors sur-contraint et le CSS résout en ignorant margin-right, ce
	   qui collait l'image à gauche. Ici le décalage vaut toujours la
	   moitié de la taille RÉELLE de l'image, débordement compris. */
	left: 50%;
	/* La zone d'image s'arrête --image-bottom-gap avant le bas de
	   .home-work : son centre est donc à 50% MOINS la moitié du gap.
	   Une image portrait, dont la hauteur vaut exactement cette zone
	   (cf. applyImageSize dans main.js), démarre ainsi pile en haut de
	   la row 2 et s'arrête 20px avant la row 9 ; une paysage, plus
	   courte, est centrée dans la même zone. */
	top: calc( 50% - var( --image-bottom-gap ) / 2 );
	transform: translate( -50%, -50% );
	/* La règle globale "img { max-width:100% }" plus haut dans ce fichier
	   s'applique à TOUS les <img>, y compris celui-ci — sans cette
	   annulation explicite, elle re-contraint (et donc écrase) la largeur
	   calculée en JS dès qu'elle dépasse la largeur de .home-work, ce qui
	   forçait le navigateur à réduire la hauteur en retour (l'image
	   "stretch/compresse" au resize). max-width:none rend la taille fixée
	   en JS (largeur + hauteur, ratio réel respecté) réellement absolue. */
	max-width: none;
	/* État "hors champ" : transparente ET floue. Les deux calques étant
	   superposés, l'entrante se refocalise pendant que la sortante se
	   défocalise — d'où l'effet de mise au point. */
	opacity: 0;
	filter: blur( var( --image-blur ) );
	/* Deux courbes DIFFÉRENTES à dessein : le fondu garde un ease-in-out
	   symétrique (il doit rester neutre), la mise au point part plus
	   franchement et s'étire en fin de course. Le décalage entre les deux
	   est ce qui fait lire un "défocus/refocus" plutôt qu'un simple
	   fondu flouté. */
	transition:
		opacity 1.2s ease-in-out,
		filter 1.4s var( --ease-focus );
	/* Le flou est coûteux sur de grandes images : on prévient le
	   navigateur pour qu'il promeuve la couche en amont plutôt que de
	   la recomposer au premier frame de la transition. */
	will-change: opacity, filter;
}

.fl-home-img.is-active {
	opacity: 1;
	filter: blur( 0 );
}

/* Réglage système "réduire les animations" : on garde le fondu, discret,
   mais on retire la mise au point qui est le mouvement le plus marqué.
   Ce bloc DOIT rester après les deux règles ci-dessus : une media query
   n'ajoute aucune spécificité, donc à sélecteur égal c'est l'ordre
   d'écriture qui tranche. */
@media (prefers-reduced-motion: reduce) {
	.fl-home-img,
	.fl-home-img.is-active {
		filter: none;
		transition: opacity 1.2s ease-in-out;
	}
}

/* Première image, rendue côté serveur (cf. template-parts/home-content.php) :
   elle doit être visible et correctement dimensionnée DÈS le premier
   rendu, avant que le JS ne pose les px exacts — sinon le navigateur
   l'afficherait à sa taille naturelle pendant quelques frames. On
   approxime donc en CSS la même règle que applyImageSize() : 7 rows sur
   9 (hauteur de grille moins les marges), moins le gap du bas. Le JS
   retire cette classe juste après avoir fixé les dimensions réelles. */
.fl-home-img.fl-initial {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(
		( 100vh - ( var( --grid-margin ) * 2 ) ) / 9 * 7 - var( --image-bottom-gap )
	);
}

/* La légende ne fait plus de fondu global (elle passait par un état
   totalement transparent entre deux projets). Chaque LIGNE contient
   maintenant deux couches de texte superposées qui se croisent — voir
   .caption-line / .caption-text plus bas. */

.home-work-placeholder {
	width: 100%;
	aspect-ratio: 1;
	max-height: 100%;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 12px;
	color: #999;
}

/* Légende à position FIXE, quel que soit le format de l'image : bas de
   .home-work (= bas de la row 8) + 20px. La zone d'image s'arrêtant
   elle-même --image-bottom-gap (20px) plus haut, l'écart entre le bas
   d'une image portrait et la légende fait donc 40px.

   La légende ne suit PAS le bord bas réel de l'image : une image
   paysage, plus courte, laisse simplement plus de blanc au-dessus,
   mais la légende reste sur la même ligne d'un projet à l'autre.
   (Auparavant un positionCaption() en JS la recalait sur l'image, d'où
   une légende qui sautait selon le portrait/paysage.) */
.home-caption {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 1.25; /* interlignage des 2 lignes de légende */
	top: calc( 100% + 20px );
}

/* Chaque ligne de légende porte DEUX couches de texte superposées (cf.
   template-parts/home-content.php) pour permettre un vrai fondu
   enchaîné : l'ancien texte s'efface pendant que le nouveau apparaît,
   sans passer par du vide. Les couches étant en absolute, la ligne n'a
   plus de hauteur propre — d'où le height explicite, calé sur le
   line-height (1.25) hérité de .home-caption, exprimé en em pour suivre
   le corps de chaque ligne. */
.home-caption .caption-line {
	display: block;
	position: relative;
	height: 1.25em;
}

.home-caption .caption-text {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

.home-caption .caption-text.is-active {
	opacity: 1;
}

/* Ligne 1 — titre/légende du projet : Hagel Mono, en rouge (accent). */
.home-caption .caption-title {
	font-family: var(--font-mono);
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: var(--color-accent);
}

/* Ligne 2 — client (ou "Série personnelle") ET année réunis, séparés par
   une virgule (cf. template-parts/home-content.php / joinMeta() dans
   js/main.js) : EB Garamond italic, en noir 75%. */
.home-caption .caption-meta {
	font-family: var(--font-garamond);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Page About — même grille 6 colonnes / 9 lignes que la home.         */
/* Bio : colonnes 1-2, rows 2-3 (2 rows). Détails : colonnes 1-2,      */
/* row 5 (1 row). Cf. maquette.                                        */
/* ------------------------------------------------------------------ */

/* Header superposé à la row 1, comme sur la home (sinon sa hauteur
   s'ajoute au-dessus de la grille et décale tout vers le bas). */
body.fl-about {
	position: relative;
}

body.fl-about .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

body.fl-about .site-footer {
	display: none;
}

.about-layout {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	grid-template-rows: repeat(9, 1fr);
	column-gap: var(--grid-gap);
	padding: var(--grid-margin);
	min-height: 100vh;
}

.about-bio,
.about-details {
	font-family: var(--font-serif);
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
}

.about-bio {
	grid-column: 1 / 3;
	grid-row: 2 / 4;
}

.about-details {
	grid-column: 1 / 3;
	grid-row: 5 / 6;
}

.about-bio p,
.about-details p {
	margin: 0 0 1.4em;
}

.about-bio p:last-child,
.about-details p:last-child {
	margin-bottom: 0;
}

.about-details a {
	transition: color 0.6s ease;
}

.about-details a:hover {
	color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* Debug grille (temporaire) — visible via ?debug=grid, voir main.js.   */
/* Superpose les 6 colonnes / 9 lignes + marges de .home-layout en      */
/* rouge vif pour vérifier visuellement l'alignement. À retirer une     */
/* fois le debug terminé.                                               */
/* ------------------------------------------------------------------ */

.fl-grid-debug {
	position: absolute;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	grid-template-rows: repeat(9, 1fr);
	column-gap: var(--grid-gap);
	padding: var(--grid-margin);
	outline: 2px solid red;
	outline-offset: -2px;
}

.fl-grid-debug-cell {
	outline: 1px solid red;
}

/* ------------------------------------------------------------------ */
/* Projet (single) & overview (archive) — layout provisoire            */
/* ------------------------------------------------------------------ */

.single-project {
	padding-top: var(--grid-margin);
	padding-bottom: var(--grid-margin);
}

.project-header {
	grid-column: 1 / -1;
	margin-bottom: 24px;
}

.project-title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: var(--letter-spacing-italic);
	margin: 0 0 4px;
}

.project-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-accent);
	margin: 0;
}

.archive-project {
	padding-top: var(--grid-margin);
	padding-bottom: var(--grid-margin);
	row-gap: var(--grid-gap);
}

.overview-item {
	grid-column: span 2;
	display: block;
	margin-bottom: var(--grid-gap);
}

.overview-item-title,
.overview-item-meta {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	margin-top: 8px;
}

.overview-item-meta {
	color: var(--color-accent);
}

@media (max-width: 900px) {
	.overview-item {
		grid-column: span 6;
	}
}

/* ------------------------------------------------------------------ */
/* Page builder — layout de base des blocs (pages génériques)          */
/* ------------------------------------------------------------------ */

.fl-page-builder {
	display: flex;
	flex-wrap: wrap;
}

.fl-block {
	width: 100%;
}

.fl-block.fl-layout-pair-left,
.fl-block.fl-layout-pair-right {
	width: 50%;
}

.fl-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.fl-video-embed {
	position: relative;
	padding-top: 56.25%;
}

.fl-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Footer */
.site-footer {
	padding: 20px var(--grid-margin);
	font-family: var(--font-mono);
	font-size: 12px;
	opacity: 0.6;
}

/* Breakpoints — à affiner selon le design (desktop-only vs responsive) */
@media (max-width: 900px) {
	.fl-block.fl-layout-pair-left,
	.fl-block.fl-layout-pair-right {
		width: 100%;
	}

	.fl-block-gallery {
		grid-template-columns: 1fr;
	}

	.home-layout {
		grid-template-columns: 1fr;
	}

	.home-index,
	.home-work,
	.home-caption {
		grid-column: 1 / -1;
	}

	.about-layout {
		grid-template-columns: 1fr;
	}

	.about-bio,
	.about-details {
		grid-column: 1 / -1;
	}
}