/*

Theme Name: Toshokan

Theme URI: https://toshokan-media.fr

Author: Quentin L

Description: Thème personnalisé pour Toshokan

Version: 1.0

*/

/* ==========================================================================
   1. Polices
   ========================================================================== */

@font-face {
	font-family:'Switzer-Variable';
	src:url(fonts/Switzer-Variable.woff2) format('woff2'),url(fonts/Switzer-Variable.woff) format('woff');
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}

/* ==========================================================================
   2. Reset et base
   ========================================================================== */

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

html {
	font-size:55%;
	scroll-behavior:smooth;
}

body {
	font-family:var(--font-serif);
	line-height:1.6;
	font-size:1.6rem;
	color:var(--color-black);
	background-color:var(--color-paper);
}

img {
	max-width:100%;
}

button {
	font:inherit;
}

.screen-reader-text {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}

/* ==========================================================================
   3. Design tokens
   ========================================================================== */

:root {
	--color-black: #000;
	--color-ink: #111;
	--color-ink-soft: #444;
	--color-caption: #636363;
	--color-paper: #fff;
	--color-accent: #BC002D;
	--color-form-border: #ccc;

	--font-sans: 'Switzer-Variable', sans-serif;
	--font-serif: 'Lora', serif;

	--radius-sm: 8px;
	--radius: 10px;

	--gutter-nav: 10.5vw;
	--gutter-content: 10vw;

	--ease: ease;
}

/* ==========================================================================
   4. Typographie
   ========================================================================== */

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

a:hover {
	text-decoration:underline;
}

h1,h2,h3,h4,h5,h6 {
	font-family:var(--font-sans);
	font-weight:900;
	line-height:1.2;
	color:var(--color-ink);
}

h1 {
	font-size:clamp(2.8rem, 6vw, 4rem);
}

h2 {
	font-size:clamp(2.2rem, calc(3vw + 1rem), 3.2rem);
}

h3 {
	font-size:clamp(1.8rem, calc(2vw + 1rem), 2.4rem);
}

h4 {
	font-size:clamp(1.6rem, calc(1.5vw + 1rem), 2rem);
}

h5 {
	font-size:clamp(1.2rem, calc(1vw + 1rem), 1.6rem);
}

h6 {
	font-size:clamp(1rem, calc(0.5vw + 1rem), 1.4rem);
}

.strong {
	font-weight:700;
}

/* ==========================================================================
   5. Utilitaires
   ========================================================================== */

.hidden {
	display:none;
}

.white {
	color:var(--color-paper);
}

.black {
	color:var(--color-ink);
}

/* ==========================================================================
   6. Header et navigation
   ========================================================================== */

.site-header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
	color:var(--color-paper);
	background-color:rgb(0 0 0 / 0);
	box-shadow:0 2px 10px rgb(0 0 0 / 0);
	transition:background-color .35s ease,color .35s ease,box-shadow .35s ease;
}

.site-header.no-transition {
	transition:none!important;
}

.site-header.scrolled {
	background-color:var(--color-paper);
	color:var(--color-ink);
	box-shadow:0 2px 10px rgb(0 0 0 / .1);
}

.navbar {
	padding-top:1rem;
	padding-right:1em;
	padding-bottom:1rem;
	padding-left:1em;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-direction:row;
}

.navbar-logo {
	position:relative;
	display:block;
}

.navbar-logo-img {
	height:3rem;
	width:auto;
	display:block;
	transition:opacity .35s ease;
}

.navbar-logo-img--dark {
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}

.site-header.scrolled .navbar-logo-img--white {
	opacity:0;
}

.site-header.scrolled .navbar-logo-img--dark {
	opacity:1;
}

.menu-menu-principal-container ul,.navbar-items {
	list-style:none!important;
	display:none;
	justify-content:center;
	gap:1.2rem;
	font-size:1.4rem;
}

.menu-item {
	font-family:var(--font-sans);
	font-size:1.7rem;
	font-weight:600;
}

.site-header:not(.scrolled) .menu-item {
	text-shadow:0 2px 8px rgb(52 31 31 / .18),0 1px 2px rgb(0 0 0 / .12);
}

.navbar-white {
	padding-top:.5em;
	padding-right:1em;
	padding-bottom:.5em;
	padding-left:1em;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.navbar-items-container {
	display:flex;
	align-items:center;
	gap:3em;
}

.navbar-search-item {
	display:flex;
	align-items:center;
	font-size:1.6rem;
	cursor:pointer;
	background:none;
	border:0;
	padding:0;
	font-family:inherit;
	color:inherit;
}

.toggle {
	color:inherit;
	display:block;
	background-color:#fff0;
	border:0;
	font-size:1.6rem;
	cursor:pointer;
}

.toggle {
	display:block;
	background-color:#fff0;
	border:0;
	font-size:1.6rem;
	cursor:pointer;
	color:inherit;
}

.navbar-logo img {
	height:2.2rem;
	width:auto;
}

.search-header {
	position:sticky;
	top:0;
	z-index:100;
	background:var(--color-paper);
}

/* ==========================================================================
   7. Menu plein écran
   ========================================================================== */

.fullscreen-menu {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgb(0 0 0 / .8);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	z-index:1001;
	display:none;
	align-items:center;
	justify-content:center;
}

.fullscreen-menu ul {
	list-style:none;
	color:var(--color-paper);
	line-height:2.5;
}

.menu-active {
	display:flex!important;
}

.inside-menu {
	position:absolute;
	top:4.5rem;
	right:2rem;
}

/* ==========================================================================
   8. Recherche
   ========================================================================== */

#search-box {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:var(--color-paper);
	z-index:1000;
	padding:1rem var(--gutter-nav);
	box-shadow:0 2px 10px rgb(0 0 0 / .1);
	transition:opacity 0.3s ease;
}

#search-box #search-container {
	height:5rem;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
	background-color:var(--color-paper);
}

#search-box .navbar-search-form {
	width:100%;
	height:100%;
}

#search-box .navbar-search-input {
	height:100%;
	display:block;
	margin:0 auto;
	padding:20px;
	border:none;
	font-size:1.6rem;
	width:100%;
	background-color:#fff0;
	font-family:var(--font-serif);
}

#search-box .navbar-search-input:focus {
	outline:none;
}

#search-box .navbar-search-input::placeholder {
	color:rgb(0 0 0 / .6);
	padding-left:10px;
}

#search-box .close {
	font-size:2em;
	position:relative;
	cursor:pointer;
	background:none;
	border:0;
	padding:0;
	font-family:inherit;
	color:inherit;
}

#search-box .close span {
	position:absolute;
	width:100%;
	height:2px;
	background-color:var(--color-ink);
	top:50%;
	left:0;
	transform-origin:center center;
}

#search-box .close span:nth-child(1) {
	transform:rotate(45deg);
}

#search-box .close span:nth-child(2) {
	transform:rotate(-45deg);
}

.navbar-search-input {
	width:12rem;
	padding:.4em .8em;
	font-size:1.8rem;
	font-family:var(--font-sans);
	border:none;
	outline:none;
	background:#fff0;
	color:inherit;
	border-bottom:2px solid currentColor;
	transition:border-color 0.3s ease;
}

.navbar-search-input::placeholder {
	color:rgb(255 255 255 / .6);
}

.navbar-search-button {
	background:none;
	border:none;
	cursor:pointer;
	padding:.4em .6em;
	display:flex;
	align-items:center;
	justify-content:center;
	color:inherit;
	font-size:1.6rem;
}

.navbar-search-button i {
	border-color:var(--color-accent);
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.hero-section {
	position:relative;
	z-index:1;
}

.hero-article {
	position:relative;
}

.hero-article::after {
	content:'';
	position:absolute;
	inset:0;
	z-index:0;
	background:linear-gradient(to top,rgb(0 0 0 / .75),rgb(0 0 0 / 0) 55%);
	pointer-events:none;
}

.hero-img {
	width:100%;
	height:60vh;
	object-fit:cover;
	object-position:top;
	display:block;
}

.hero-article-text {
	position:absolute;
	left:1em;
	bottom:2rem;
	z-index:1;
	color:var(--color-paper);
	background:none;
	padding-top:0;
	padding-right:0;
	padding-bottom:0;
	padding-left:0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	margin-left:0;
	max-width:none;
	right:1em;
}

.hero-article-text .article-title {
	color:var(--color-paper);
}

.hero-article-text p {
	color:rgb(255 255 255 / .85);
	margin-top:1rem;
}

.hero-article-text .article-category {
	color:var(--color-paper);
}

/* ==========================================================================
   10. Article vedette secondaire (before-last)
   ========================================================================== */

.article-title {
	margin-bottom:1rem;
}

.article-category {
	font-family:var(--font-sans);
	display:inline-block;
	text-transform:uppercase;
	color:var(--color-accent);
	font-weight:700;
	letter-spacing:.08em;
	margin-bottom:1rem;
	font-size:1.3rem;
}

.before-last-section {
	margin-top:1rem;
	margin-right:0;
	margin-bottom:1rem;
	margin-left:0;
	padding-top:.5em;
	padding-right:1em;
	padding-bottom:.5em;
	padding-left:1em;
	border-top:var(--color-ink) solid 1px;
	border-bottom:var(--color-ink) solid 1px;
	display:grid;
	grid-template-columns:1fr;
	gap:2rem;
	align-items:center;
}

.before-last-image-wrapper {
	position:relative;
	overflow:hidden;
	border-radius:var(--radius-sm);
}

.before-last-content-wrapper a {
	display:block;
}

.before-last-image-wrapper img {
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
	object-position:center;
	aspect-ratio:16 / 9;
	transition:transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.before-last-image-wrapper a:hover .article-category--overlay {
	opacity:1;
	transform:translateY(0);
}

.before-last-content-wrapper {
	display:flex;
	flex-direction:column;
	gap:1rem;
	align-items:flex-start!important;
	width:100%;
	padding-bottom:5rem;
}

.article-title a:hover {
	color:var(--color-accent);
}

.before-last-image-wrapper:hover img {
	transform:scale(1.04);
}

/* ==========================================================================
   11. Grille d'articles
   ========================================================================== */

.articles-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:5rem;
	margin-top:1rem;
	margin-right:0;
	margin-bottom:1rem;
	margin-left:0;
	padding-left:1em;
	padding-right:1em;
	padding-top:.5em;
	padding-bottom:.5em;
	flex-direction:column;
}

.article-card-image {
	position:relative;
	overflow:hidden;
	border-radius:var(--radius-sm);
}

.article-card-image a,.before-last-image-wrapper a {
	position:relative;
	display:block;
}

.article-card-image a::after,.before-last-image-wrapper a::after {
	content:'';
	position:absolute;
	inset:0;
	z-index:0;
	background:linear-gradient(to top,rgb(0 0 0 / .35),rgb(0 0 0 / 0) 50%);
	opacity:0;
	transition:opacity 0.3s ease;
	border-radius:var(--radius-sm);
	pointer-events:none;
}

.article-card-image a:hover::after,.before-last-image-wrapper a:hover::after {
	opacity:1;
}

.article-card-image img {
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
	object-position:center;
	aspect-ratio:16 / 9;
	border-radius:var(--radius-sm);
	transition:transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.article-category--overlay {
	z-index:1;
	position:absolute;
	bottom:1.2rem;
	left:1.2rem;
	background:rgb(255 255 255 / .95);
	padding:.3rem .9rem;
	border-radius:999px;
	opacity:0;
	transform:translateY(6px);
	transition:opacity 0.3s ease,transform 0.3s ease;
}

.article-card-image:hover .article-category--overlay {
	opacity:1;
	transform:translateY(0);
}

.article-card-content {
	margin-top:1rem;
	width:100%;
	max-width:100%;
}

.article-card-image img,.before-last-image-wrapper img {
	border-radius:var(--radius-sm);
}

.article-card-image:hover img {
	transform:scale(1.04);
}

/* ==========================================================================
   12. Article (single) et sidebars
   ========================================================================== */

.single-article-title {
	margin-bottom:1rem;
	font-size:3.2rem;
}

.single-hero-article-text {
	position:absolute;
	left:1em;
	bottom:2rem;
	z-index:1;
	color:var(--color-paper);
	background:none;
	padding-top:0;
	padding-right:0;
	padding-bottom:0;
	padding-left:0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	margin-left:0;
	max-width:none;
	right:1em;
}

.single-hero-article-text .single-article-title {
	color:var(--color-paper);
}

.single-hero-article-text .article-category {
	color:var(--color-paper);
}

.article-layout {
	display:flex;
	line-height:1.8;
	margin-top:2rem;
	flex-direction:column;
}

.sticky-sidebar {
	position:sticky;
	top:7rem;
	align-self:start;
}

.left-sidebar {
	width:100%;
	display:none;
}

.instagram-icon {
	display:block;
	font-size:2rem;
	color:var(--color-ink);
	transition:transform 0.3s ease;
	text-align:center;
}

.instagram-icon:hover {
	transform:scale(1.2);
}

.article-content {
	display:flex;
	flex-direction:column;
	flex:1;
	padding:0 1em;
	gap:1em;
}

.article-first-paragraph {
	font-size:2.2rem;
	font-weight:700;
	margin-top:1em;
	margin-bottom:.2em;
	line-height:1.5;
	font-family:var(--font-sans);
}

.article-date {
	border-bottom:var(--color-ink) solid 1px;
	padding-bottom:1rem;
	font-family:var(--font-sans);
	font-size:1.8rem;
}

.article-text {
	margin:3rem 0;
}

.article-text p {
	margin-bottom:calc(20px - (((20px * 1.38889) - 20px) / 2));
	font-size:1.8rem;
	color:var(--color-ink-soft);
}

.article-text h2,.article-text h3 {
	padding-top:calc(20px - (((20px * 1.38889) - 20px) / 2));
	margin-bottom:calc(20px - (((24px * 1.2) - 24px) / 2));
}

.article-text img {
	display:block;
	margin-left:auto;
	margin-right:auto;
	border-radius:var(--radius);
}

.wp-element-caption {
	margin-bottom:3em;
	font-style:italic;
	color:var(--color-caption);
}

.article-content ul {
	padding-left:3rem;
	list-style-type:disc;
}

.article-content ul li {
	margin-bottom:1rem;
}

.right-sidebar {
	width:100%;
	font-size:1.2rem;
	padding-top:0;
	padding-right:4vw;
	padding-bottom:0;
	padding-left:2vw;
	margin-top:2rem;
}

.related-articles h3 {
	margin-bottom:1rem;
	border-bottom:1px solid var(--color-ink);
	padding-bottom:.5rem;
}

.related-articles-cards {
	display:flex;
	flex-direction:column;
	gap:3rem;
}

.related-article-image {
	width:100%;
	overflow:hidden;
	margin-bottom:1rem;
	max-height:200px;
	object-fit:cover;
	object-position:top;
}

.related-article-image-wrapper {
	position:relative;
	overflow:hidden;
	border-radius:var(--radius-sm);
}

.related-article-image-wrapper a {
	display:block;
}

.related-article-image-wrapper img {
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
	object-position:center;
	aspect-ratio:16 / 9;
	transition:transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.related-article-image-wrapper a::after {
	content:'';
	position:absolute;
	inset:0;
	z-index:0;
	background:linear-gradient(to top,rgb(0 0 0 / .35),rgb(0 0 0 / 0) 50%);
	opacity:0;
	transition:opacity 0.3s ease;
	border-radius:var(--radius-sm);
	pointer-events:none;
}

.related-article-image-wrapper a:hover::after {
	opacity:1;
}

.related-article-image-wrapper a:hover .article-category--overlay {
	opacity:1;
	transform:translateY(0);
}

.article-content a:hover {
	color:var(--color-accent);
}

.article-text a {
	color:var(--color-accent);
}

.related-article-image-wrapper:hover img {
	transform:scale(1.04);
}

/* ==========================================================================
   13. Pages texte (à propos, recherche)
   ========================================================================== */

.search-results-hero {
	padding-top:2rem;
	padding-right:1vw;
	padding-bottom:2rem;
	padding-left:1vw;
}

.text-page-content {
	display:flex;
	line-height:1.8;
	margin-top:1rem;
	width:100%;
	flex-direction:column;
}

.text-page-layout {
	padding-top:0;
	padding-right:1vw;
	padding-bottom:0;
	padding-left:1vw;
}

.text-page-main a {
	color:var(--color-accent);
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer {
	padding-top:.5em;
	padding-right:1em;
	padding-bottom:.5em;
	padding-left:1em;
}

.footer-content {
	display:flex;
	justify-content:space-between;
	border-top:1px solid var(--color-ink);
	padding-top:2rem;
	padding-right:0;
	padding-bottom:2rem;
	padding-left:0;
	flex-direction:column;
	gap:2rem;
	align-items:flex-start;
}

.footer-logo {
	width:12rem;
}

.footer-links ul {
	list-style:none;
	display:flex;
	gap:1rem;
	font-family:var(--font-sans);
	font-weight:600;
}

/* ==========================================================================
   15. Formulaires (Contact Form 7)
   ========================================================================== */

.wpcf7 {
	max-width:600px;
	margin:0 auto;
}

.wpcf7 label {
	font-family:var(--font-sans);
	font-weight:600;
}

.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 textarea {
	width:100%;
	padding:.75rem 1rem;
	margin-top:.5rem;
	margin-bottom:1.2rem;
	border:1px solid var(--color-form-border);
	font-family:var(--font-serif);
	font-size:1.5rem;
	resize:none;
}

.wpcf7 input[type="submit"] {
	background-color:#000;
	color:var(--color-paper);
	padding:.75rem 2rem;
	border:none;
	border-radius:25px;
	font-weight:700;
	cursor:pointer;
	transition:background-color 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
	background-color:var(--color-accent);
}

.wpcf7-response-output {
	margin-top:1rem;
	font-size:1.5rem;
	color:var(--color-ink);
	background-color:#fff0;
	border:1px solid var(--color-ink)!important;
	padding:.75rem;
	border-radius:6px;
}

.wpcf7-not-valid-tip {
	color:var(--color-accent);
}

/* ==========================================================================
   16. Page 404
   ========================================================================== */

.error-404-wrapper {
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	padding:15rem 0;
}

.error-404-content {
	display:flex;
	flex-direction:column;
	align-items:center;
}

.error-404-title {
	font-size:5rem;
	font-weight:700;
	margin-bottom:1rem;
	color:var(--color-ink);
}

.error-404-message {
	font-size:1.6rem;
	margin-bottom:2rem;
}

.error-404-logo-link {
	margin-top:10rem;
	display:inline-block;
	transition:transform 0.3s ease;
}

.error-404-logo-link:hover {
	transform:scale(1.05);
}

.error-404-logo {
	width:12rem;
	height:auto;
}

/* ==========================================================================
   17. Blocs WordPress
   ========================================================================== */

.wp-block-embed {
	margin:3rem 0;
}

.wp-block-image {
	margin:5rem 0;
	border-radius:var(--radius);
}

.wp-block-quote {
	margin:5rem 0;
	line-height:1.2;
	font-style:italic;
	font-weight:700;
	font-family:var(--font-sans);
	font-size:3rem;
	padding-left:3rem;
	border-left:4px solid var(--color-accent);
}

.wp-block-quote p {
	line-height:1.2;
	font-size:3rem;
}

/* ==========================================================================
   18. Instagram CTA
   ========================================================================== */

.instagram-cta {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:1rem;
	border-radius:var(--radius);
	background-color:var(--color-ink);
	color:var(--color-paper);
}

.instagram-cta-icon {
	font-size:2rem;
	color:var(--color-accent);
}

.instagram-cta-heading {
	display:flex;
	align-items:center;
	gap:.8rem;
	margin-bottom:.6rem;
}

.instagram-cta-text h3 {
	color:var(--color-paper);
}

.instagram-cta-text p,
.instagram-cta--compact p {
	color:rgb(255 255 255 / .75);
}

.instagram-cta--banner .instagram-cta-text {
	max-width:56rem;
}

.instagram-cta-button {
	display:inline-block;
	background-color:var(--color-accent);
	color:var(--color-paper);
	font-family:var(--font-sans);
	font-weight:700;
	font-size:1.4rem;
	padding:.9rem 2rem;
	border-radius:999px;
	text-decoration:none;
	transition:background-color 0.3s ease,color 0.3s ease;
}

.instagram-cta-button:hover {
	background-color:var(--color-paper);
	color:var(--color-ink);
	text-decoration:none;
}

.instagram-cta a {
	color:var(--color-paper);
}

.instagram-cta--banner {
	margin:3rem 0;
	padding:2.5rem 1em;
}

.instagram-cta--compact {
	margin-top:3rem;
	padding:2rem;
}

.instagram-cta--compact .instagram-cta-icon {
	font-size:2rem;
}

.instagram-cta--compact p {
	font-size:1.3rem;
	margin:0;
}

.instagram-cta--compact .instagram-cta-button {
	font-size:1.3rem;
	padding:.6rem 1.4rem;
}

/* ==========================================================================
   19. Media queries (mobile-first)
   ========================================================================== */

@media (min-width:601px) {
	.article-card-content {
		margin-top:1.5rem;
	}
	.article-first-paragraph {
		font-size:2.8rem;
	}
	.articles-grid {
		grid-template-columns:repeat(2,1fr);
		gap:3rem;
		margin-top:2rem;
		margin-right:var(--gutter-content);
		margin-bottom:2rem;
		margin-left:var(--gutter-content);
		padding-left:2vw;
		padding-right:2vw;
		padding-top:0;
		padding-bottom:0;
	}
	.before-last-content-wrapper {
		width:auto;
		padding-bottom:0;
	}
	.before-last-section {
		margin-top:2rem;
		margin-right:var(--gutter-content);
		margin-bottom:2rem;
		margin-left:var(--gutter-content);
		padding-top:1.5rem;
		padding-right:0;
		padding-bottom:1.5rem;
		padding-left:0;
	}
	.footer-content {
		padding-top:5rem;
		padding-bottom:5rem;
	}
	.footer-links ul {
		gap:2rem;
	}
	.footer-logo {
		width:20rem;
	}
	.hero-article-text {
		left:var(--gutter-content);
		bottom:5rem;
		max-width:min(70rem,80vw);
		right:auto;
	}
	.hero-img {
		height:min(85vh,90rem);
	}
	.instagram-cta--banner {
		padding-left:2vw;
		padding-right:2vw;
	}
	.menu-menu-principal-container ul,.navbar-items {
		gap:2.2rem;
		font-size:inherit;
	}
	.navbar {
		padding-top:1.8rem;
		padding-right:2vw;
		padding-bottom:1.8rem;
		padding-left:2vw;
	}
	.navbar-logo img {
		height:3rem;
	}
	.navbar-white {
		padding-top:1rem;
		padding-right:2vw;
		padding-bottom:1rem;
		padding-left:2vw;
	}
	.search-results-hero {
		padding-top:5rem;
		padding-right:2vw;
		padding-bottom:5rem;
		padding-left:2vw;
	}
	.single-article-title {
		font-size:4rem;
	}
	.single-hero-article-text {
		left:var(--gutter-content);
		bottom:5rem;
		max-width:min(80rem,80vw);
		right:auto;
	}
	.site-footer {
		padding-top:2rem;
		padding-right:2vw;
		padding-bottom:2rem;
		padding-left:2vw;
	}
	.text-page-content {
        margin-top:2rem;
	}
	.text-page-layout {
		padding-right:2vw;
		padding-left:2vw;
	}
	html {
		font-size:62.5%;
	}
}

@media (min-width:901px) {
	.article-first-paragraph {
		font-size:2.5rem;
		line-height:1.4;
	}
	.article-layout {
		flex-direction:row;
	}
	.articles-grid {
		grid-template-columns:repeat(3,1fr);
		padding-left:4vw;
		padding-right:4vw;
	}
	.before-last-section {
		grid-template-columns:1.8fr 1fr;
		gap:4rem;
	}
	.footer-content {
		flex-direction:row;
		gap:normal;
		align-items:normal;
	}
	.footer-links ul {
		gap:5rem;
	}
	.instagram-cta--banner {
		flex-direction:row;
		align-items:center;
		gap:2rem;
		padding-top:3rem;
		padding-bottom:3rem;
		padding-left:4vw;
		padding-right:4vw;
	}
	.instagram-cta--banner .instagram-cta-text {
		flex:1;
	}
	.instagram-cta--banner .instagram-cta-button {
		margin-left:auto;
		flex-shrink:0;
	}
	.left-sidebar {
		width:10vw;
		display:block;
	}
	.menu-menu-principal-container ul,.navbar-items {
		display:flex;
	}
	.navbar {
		padding-right:4vw;
		padding-left:4vw;
	}
	.navbar-items-container {
		gap:2em;
	}
	.navbar-white {
		padding-right:4vw;
		padding-left:4vw;
	}
	.right-sidebar {
		width:35rem;
		margin-top:0;
	}
	.search-results-hero {
		padding-right:4vw;
		padding-left:4vw;
	}
	.single-article-title {
		font-size:5rem;
	}
	.site-footer {
		padding-right:4vw;
		padding-left:4vw;
	}
	.text-page-content {
		width:70vw;
		flex-direction:row;
	}
	.text-page-layout {
		padding-right:4vw;
		padding-left:4vw;
	}
	.toggle {
		display:none;
	}
}

@media (min-width:1201px) {
	.articles-grid {
		padding-left:0;
		padding-right:0;
	}
	.instagram-cta--banner {
		padding-left:var(--gutter-content);
		padding-right:var(--gutter-content);
	}
	.navbar {
		padding-right:var(--gutter-nav);
		padding-left:var(--gutter-nav);
	}
	.navbar-white {
		padding-right:var(--gutter-nav);
		padding-left:var(--gutter-nav);
	}
	.right-sidebar {
		width:50rem;
		padding-right:var(--gutter-content);
		padding-left:5vw;
	}
	.search-results-hero {
		padding-right:var(--gutter-content);
		padding-left:var(--gutter-content);
	}
	.site-footer {
		padding-right:var(--gutter-content);
		padding-left:var(--gutter-content);
	}
	.text-page-layout {
		padding-right:var(--gutter-content);
		padding-left:var(--gutter-content);
	}
}