/*
Theme Name: TIPCo Holding
Theme URI: https://tipco.it
Author: TIPCo
Author URI: https://tipco.it
Description: Temporary single-page holding theme for tipco.it, used until the tipco theme and its content are migrated. Brand tokens are copied verbatim from the tipco theme's theme.json so the two cannot drift visually. Delete once the real site is live.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tipco-holding
*/

:root{
	--navy-deep:#081019;
	--navy:#0D1B2A;
	--stone:#F2EFE8;
	--stone-muted:#8B95A1;
	--gold:#C9A24A;
	--gold-on-navy:#D8B25C;
	--body-text:#D6DBE0;
	--town-text:#C3CAD2;
	--measure:34ch;
	--edge:clamp(1.5rem,5vw,5.5rem);
	--display:"Playfair Display",Georgia,"Times New Roman",serif;
	--body:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html{background:var(--navy-deep)}

body{
	margin:0;
	background:var(--navy-deep);
	color:var(--stone);
	font-family:var(--body);
	-webkit-font-smoothing:antialiased;
}

.page{
	position:relative;
	min-height:100svh;
	display:grid;
	grid-template-rows:auto 1fr auto;
	gap:clamp(2rem,6vh,4rem);
	padding:clamp(1.75rem,4vw,3rem) var(--edge) clamp(1.5rem,3vw,2.25rem);
	overflow:hidden;
	isolation:isolate;
}

/* Photography / video ---------------------------------------------- */

.backdrop{
	position:absolute;
	inset:0;
	z-index:-2;
	width:100%;
	height:100%;
	object-fit:cover;
	background:var(--navy-deep);
}

.scrim{
	position:absolute;
	inset:0;
	z-index:-1;
	background:
		linear-gradient(180deg,rgba(8,16,25,.62) 0%,rgba(8,16,25,.12) 36%,rgba(8,16,25,.52) 68%,rgba(8,16,25,.92) 100%),
		linear-gradient(96deg,rgba(13,27,42,.68) 0%,rgba(13,27,42,.16) 54%,rgba(13,27,42,0) 100%);
}

/* Lockup ------------------------------------------------------------ */

.lockup{width:clamp(190px,20vw,248px);height:auto;display:block}

/* Statement --------------------------------------------------------- */

.statement{align-self:center;max-width:var(--measure)}

.eyebrow{
	margin:0 0 clamp(1rem,2.5vh,1.6rem);
	font-size:.68rem;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--gold-on-navy);
}

.statement h1{
	margin:0;
	font-family:var(--display);
	font-weight:500;
	font-size:clamp(2.4rem,6.4vw,4.15rem);
	line-height:1.04;
	letter-spacing:-.015em;
	text-wrap:balance;
}

.statement h1 em{font-style:normal;color:var(--gold-on-navy)}

.lede{
	margin:clamp(1.25rem,3vh,2rem) 0 0;
	max-width:46ch;
	font-size:clamp(.95rem,1.5vw,1.05rem);
	line-height:1.7;
	color:var(--body-text);
}

.contact{
	margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;
	font-size:clamp(.95rem,1.5vw,1.05rem);
	line-height:1.7;
	color:var(--body-text);
}

.contact a{
	color:var(--gold-on-navy);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:.28em;
	text-decoration-color:rgba(216,178,92,.45);
	transition:text-decoration-color .2s ease;
}

.contact a:hover{text-decoration-color:var(--gold-on-navy)}

.contact a:focus-visible{
	outline:2px solid var(--gold);
	outline-offset:3px;
	border-radius:2px;
}

/* Town network ------------------------------------------------------ */

.network{
	border-top:1px solid rgba(242,239,232,.16);
	padding-top:clamp(1rem,2.5vh,1.5rem);
}

.network__label{
	margin:0 0 .85rem;
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--stone-muted);
}

.network__list{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:.5rem clamp(1rem,2.4vw,1.9rem);
	font-size:.8rem;
	letter-spacing:.03em;
	color:var(--town-text);
}

.network__list li{white-space:nowrap}

/* Entrance ---------------------------------------------------------- */

.rise{animation:rise .8s cubic-bezier(.2,.7,.3,1) both}
.rise--2{animation-delay:.1s}
.rise--3{animation-delay:.2s}

@keyframes rise{
	from{opacity:0;transform:translateY(14px)}
	to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
	.rise{animation:none}
}

@media (max-width:640px){
	:root{--measure:100%}
	.page{gap:2.25rem}
}

/* Screen-reader-only, matching core's convention. */
.screen-reader-text{
	border:0;
	clip-path:inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
	word-wrap:normal;
}