@import url("https://fonts.bunny.net/css?family=goudy-bookletter-1911:400|bona-nova:400i");

:root {
    --bookcel: #F5E2B4;
    --warm-red: #FD644D;
    --text-ink: #392D12;
    --block-ink: rgb(80, 74, 59);
    --body-font-size: clamp(1.6rem, 4.8vmin, 2.4rem);
	--heading-font-size: clamp(2.4rem, 7.78vmin, 4.8rem);
	--body-leading: 0.5; /* custom */
	--drop-cap-lines: 3; /* default, media queries override */
	--cap-height: 0.144; /* baseline to bottom, measured from screen */
	--descender: 0.178; /* top to cap height, measured from screen */
	--x-height: 0.25; /* top to median, eyeballed */	
}

/* DARK MODE
@media (prefers-color-scheme: dark) {
:root {
	--warm-red: #7E2E1C;
	--bookcel: #80734E;
	--text-ink: #F5E2D2;
	--block-ink: black;
 }
}
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/* outline: 1px solid rgba(0,255,255,0.5); /*  DEBUG */
}

html {
    background: var(--bookcel);
    font-size: 62.5%;
    font-family: "Goudy Bookletter 1911", serif;
    color: var(--text-ink);
	scroll-behavior: smooth;
}

html, figcaption, p {
	line-height: calc(1 + var(--body-leading));
}

img, object, /* a, div */ {
	line-height:0;
}

section {
    display: grid;
    place-content: center;
    text-align: center;
/*	justify-items: center;
	align-items: center; */
}

body {
	font-size: var(--body-font-size);
}

/* NAV BAR - REMOVED 
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 8.33vmax;
    z-index: 1;
    box-shadow: 0 0.1rem 0.8rem rgba(80, 74, 59, 0.5);
}

nav {
    position: relative;
    background-color: var(--warm-red);
    color: var(--text-ink);
    height: 100%;
    width: 100%;
    padding: 0 11.11vmin;
    display: flex;
    justify: space-between;
    align-items: center;
}

.logo-icon {
	height: 66.67%;
}
*/

/* LOGO SHADOW FOR INLINE SVG - UNUSED
.home > a > img {
	width: 66.66vmin;
	drop-shadow: 0.3rem 0.3rem 0.6rem rgba(80, 74, 59, 0.5); 
}
*/

#home {
    height: 100vh;

	
/*	line-height: 0; */
/*	grid-template-columns: 16.67vmin 66.67vmin; */
/*	justify-content: start; */
	

	/* padding-inline: 16.67vmin; */
	
	grid-template-columns: 16.67vmin calc(100vw-33.33vmin) calc(100vw-33.33vmin) 16.67vmin; /* ordenar esto */
	letter-spacing: calc(var(--body-font-size) / 10);
	text-transform: uppercase;
	font-size: 133.33%;
	
}


div.fondo {
	position: absolute;
	height: 100%;
	width: 100%;     
	
	background-image: url("images/bg-1.jpg");   
		
    background-image: linear-gradient(
    to bottom, transparent, transparent 83.3%, white 100%
    ), url("images/bg-1.jpg");     
       
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: multiply;    
    filter: saturate(0%);
    opacity: 0.55;
    background-position: 80% 40%;
    z-index: -1;
}

.logo {
	height: 50vmin;
	/* mix-blend-mode: darken; */
}

/* NOSOTROS */
#nosotros, #trabajos, #imprenta, #grafica {
	min-height: 100vh;
	padding-block: var(--heading-font-size);
}

a {
	color: var(--warm-red);
	text-decoration: none;
	hyphens: none;
}

.mail{
	cursor: copy;
}

i {
	font-family: 'Bona Nova';
	font-size: 93%;
	-webkit-text-stroke: calc(var(--body-font-size) * 0.01);
}

h1 {
    color: var(--warm-red);
    text-align: center;
    font-weight: normal;
    letter-spacing: calc(var(--heading-font-size) / 8); /* orig.: / 12 */
    font-size: var(--heading-font-size);
/*	margin-top:
		calc(
			16.67vmax -
			( var(--heading-font-size) * var(--cap-height) )
			* -1
		);	*/
	margin-top:
		calc(
			( var(--heading-font-size) * var(--cap-height) )
			* -1
			- ( var(--body-font-size) * var(--body-leading) )
		);
	margin-bottom:
		calc(
			var(--heading-font-size) * var(--descender)
			* -1
			+ var(--body-font-size)
			+ ( var(--body-font-size) * var(--body-leading) )
		); 
	line-height:
		calc(
			( ( var(--body-font-size) * var(--body-leading) )
			+ var(--body-font-size) ) * 2
		);
	
	word-wrap: break-word;
	max-width: 77.78vmin;
	margin-inline: auto;
}

h2{
	font-weight: normal;
	color: var(--warm-red);
	font-size: var(--body-font-size);
	
	/* estos dos puestos a ojo: */
	margin-top: calc(var(--heading-font-size) * -1 );
	margin-bottom:	calc(			var(--heading-font-size) * -0.5 );
}


p {
    width: 77.78vmin;
	max-width: calc( var(--body-font-size) * 22);
	text-align: justify;
	text-indent: var(--body-font-size);
}

p, figcaption {
    margin-top: calc( var(--body-font-size) * var(--body-leading) / -2 );
 	padding-bottom: calc(var(--body-font-size) * var(--body-leading) / 2);   
}

p, h1 {
     -webkit-hyphens: auto;
/*     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
     -webkit-hyphenate-limit-chars: 6 3 3;
     -webkit-hyphenate-limit-lines: 2;
     -webkit-hyphenate-limit-last: always;
     -webkit-hyphenate-limit-zone: 8%; */
     -moz-hyphens: auto;
/*     -moz-hyphenate-limit-chars: 6 3 3;
     -moz-hyphenate-limit-lines: 2;
     -moz-hyphenate-limit-last: always;
     -moz-hyphenate-limit-zone: 8%; */
     -ms-hyphens: auto;
/*     -ms-hyphenate-limit-chars: 6 3 3;
     -ms-hyphenate-limit-lines: 2;
     -ms-hyphenate-limit-last: always;
     -ms-hyphenate-limit-zone: 8%; */
     hyphens: auto;
/*     hyphenate-limit-chars: 6 3 3;
     hyphenate-limit-lines: 2;
     hyphenate-limit-last: always;
     hyphenate-limit-zone: 8%; */
 }

p:first-of-type {
    text-indent: 0;
}

@media screen and (max-width: 400px) {
/*	p:first-of-type::first-letter {
BOUNDING BOX SIZE TURNS OUT INCONSISTENT ACROSS BROWSERS */
.first-letter{
		--drop-cap-lines: 2;
	}
}

@media screen and (min-width: 1400px) {
/*	p:first-of-type::first-letter {
BOUNDING BOX SIZE INCONSISTENT ACROSS BROWSERS */
.first-letter{
		--drop-cap-lines: 4;
	}
}

/* p:first-of-type::first-letter {	 
BOUNDING BOX SIZE INCONSISTENT ACROSS BROWSERS */
.first-letter{
	color: var(--warm-red);
	float: left;
/*	margin-right: calc(var(--body-font-size) / 8);    (orig.: / 4) */
	line-height: 1;
	--drop-cap-size:
		calc(
				(
					( var(--body-font-size) * var(--drop-cap-lines) )
					
					+ (
						( var(--body-font-size) * var(--body-leading) )
						* ( var(--drop-cap-lines) - 1 )						
					)

				)
				
				* ( 1 + var(--descender) + var(--cap-height) )
				
			);
	font-size: var(--drop-cap-size);


	margin-top:
			calc(
				( var(--body-font-size) * var(--body-leading) / 2 )
				+ ( var(--drop-cap-size) * var(--cap-height) * -1 )
				+ ( var(--body-font-size) * var(--x-height) )
			);

	margin-bottom:
			calc(
				( var(--drop-cap-size) * var(--descender) * -1 )
				+ ( var(--body-font-size) * var(--descender) )
			) ;

}

.first-word{
	font-variant: small-caps;
	text-stroke: calc(var(--body-font-size) * 0.01); 
	-webkit-text-stroke: calc(var(--body-font-size) * 0.01);
	letter-spacing: calc(var(--body-font-size) / 10); /* (orig.: / 20) */
}

article {
	display: grid;	
	width: 77.78vmin;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
}

figure, figure > img{
	width: 100%; 
	max-width: min(77.78vmin, var(--body-font-size) * 22);
}

article > div{
	grid-column: span 1;
}

@media (min-aspect-ratio: 11/7) {
	/* 11/7 era la proporción correcta para llegar a 1/9 de margen, 9/7 para cambiar justo al tocar - NO SÉ POR QUÉ NO ANDA AHORA */
#imprenta > article {
	width: calc( (min(77.78vmin, var(--body-font-size) * 22) * 1.5)  + var(--body-font-size));
	max-width: calc(77.78vw * 1.5);
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: var(--body-font-size);  /* EL GAP APARECE DENTRO DE los que spanean 2, y se distribuye a sus costados! */
}
	
#imprenta > article > div{
	grid-column: span 2;
}

#grafica > article {
 	width: calc(
	 min(77.78vmin, var(--body-font-size) * 22) * 1.667 + ( var(--body-font-size) * 2) );
	grid-template-columns: 1.5fr 1fr 1fr;
	grid-column-gap: var(--body-font-size); 
}

#grafica > article > div{
	grid-column: span 1.5;
	/* width: calc( min(77.78vmin, var(--body-font-size) * 22) / 2 ); */
} 

#grafica > article > div > p{
	width: calc( min(77.78vmin, var(--body-font-size) * 22) / 1.5 + var(--body-font-size) );
	max-width: calc(77.78vw * 1.5);
} 

}


#final {
	min-height: 60vh;
	/* margin-block: auto; */
}

#final > img{
	width: calc( ( (min(77.78vmin, var(--body-font-size) * 22) * 1.5) + var(--body-font-size) ) / 3);

}




/* https://www.w3schools.com/howto/howto_js_snackbar.asp */
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	position: fixed;
	z-index: 1;
	min-width: calc(var(--body-font-size) * 7);
	margin-left: calc( (var(--body-font-size) * 7) / -2);
	left: 50%;
	bottom: calc( var(--body-font-size) + ( var(--body-font-size) * var(--body-leading ) ) );
	text-align: center;
	background-color: var(--block-ink);
	color: var(--bookcel);
	line-height: 1;
	padding: calc(var(--body-font-size) / 2 );
	border-radius: calc(var(--body-font-size) / 2);
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {opacity: 1;}
  to {opacity: 0;}
}

@keyframes fadeout {
  from {opacity: 1;}
  to {opacity: 0;}
}

footer {
	width: 100%;
    min-height: 8.33vmax;
    background-color: var(--warm-red);
    color: var(--text-ink);
	padding: calc( var(--body-font-size) + ( var(--body-font-size) * var(--body-leading ) ) );
	padding-inline: 11.11vmin;
	text-align: center;
}

footer > ul > a {
	color: var(--text-ink);
}

h3 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: calc( var(--body-font-size) / 8 );
	word-wrap: break-word;
	max-width: 100%;
}