/*
Theme Name: Greygram
Theme URI: http://greygram.local
Author: Greygram
Author URI: http://greygram.local
Description: Custom, type-led theme for the Greygram brand revamp (R2). Classic PHP templates, hardcoded content, SEO-focused.
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.52.41
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greygram
*/

/* ---- Brand palette ----
   #1B222C  ink
   #6D7176  grey
   #A3A6A8  grey-light
   #E7E9EA  paper
*/

:root {
	--ink: #1B222C;
	--grey: #6D7176;
	--grey-light: #A3A6A8;
	--paper: #E7E9EA;
	--paper-card: #dcdfe1;
	/* UI surfaces */
	--ink-deep: #14181f;        /* mobile-nav bg, footer pills, service-card--1, cta-chip */
	--ink-deep-hover: #2c3543; /* footer pill hover */
	--island: #d2d6d8;          /* header island bg */
	--service-mid: #49505a;     /* service-card--3 bg, cta-chip default */
	/* Layout */
	--maxw: 1920px;
	--nav-h: 60px;          /* header island height — referenced across style/projects/sections */
	--gutter: clamp(1.5rem, 4vw, 4rem);
	--cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="8" fill="none" stroke="%231B222C" stroke-width="1.5"/></svg>') 14 14;
	--cursor-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="8" fill="none" stroke="%23E7E9EA" stroke-width="1.5"/></svg>') 14 14;
}

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

html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

body {
	font-family: 'Anthine', sans-serif;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	cursor: none; /* OS cursor hidden — the .glass-cursor element follows the mouse */
}

a, button, input, textarea, select, label, summary, [role="button"], .work-card, .project-card, .filter-chip {
	cursor: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ===== Liquid Glass cursor ===== */
.glass-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	/* JS sets --gx/--gy to the mouse position; translate(-50%, -50%) keeps
	   the cursor centred regardless of its current width/height (so hover
	   growth doesn't shift it off-centre). */
	transform: translate(var(--gx, -100px), var(--gy, -100px)) translate(-50%, -50%);
	background: transparent;
	/* SVG displacement filter bends the background under the cursor like a
	   real glass lens; saturate/contrast give it a subtle "wet" tint. */
	backdrop-filter: url(#glass-cursor-filter) saturate(140%);
	-webkit-backdrop-filter: url(#glass-cursor-filter) saturate(140%);
	border: 2px solid rgba(255, 255, 255, 0.35);
	box-shadow:
		0 6px 22px rgba(20, 24, 31, 0.14),
		inset 0 0 6px rgba(255, 255, 255, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
	            height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
	            background 0.25s ease;
	will-change: transform, width, height;
}

.glass-cursor.is-hover {
	width: 72px;
	height: 72px;
	background: rgba(255, 255, 255, 0.16);
}

@media (hover: none), (pointer: coarse) {
	.glass-cursor { display: none; }
}

/* Click ripple — a glass ring expands and fades from the click point */
.glass-ripple {
	position: fixed;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%);
	border: 0;
	background: transparent;
	backdrop-filter: url(#glass-cursor-filter);
	-webkit-backdrop-filter: url(#glass-cursor-filter);
	animation: glassRipple 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	will-change: width, height, opacity;
}

@keyframes glassRipple {
	0%   { width: 24px;  height: 24px;  opacity: 0.85; }
	60%  { opacity: 0.45; }
	100% { width: 320px; height: 320px; opacity: 0; }
}

/* ===== Animated site background (Stripe-style gradient on canvas) ===== */
.site-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--paper);
	pointer-events: none;
	/* promote to its own composited layer so scrolling doesn't repaint it */
	transform: translateZ(0);
	will-change: transform;
}

.site-bg__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.site-bg__grain {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	/* no mix-blend-mode — it forces expensive recomposition on every scroll */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Site header — fixed island, full content width ===== */
.site-header {
	position: fixed;
	top: calc(1.25rem + env(safe-area-inset-top));
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0 var(--gutter);
	pointer-events: none; /* let clicks pass between island and edges */
}

.site-header__inner {
	pointer-events: auto;
	width: min(var(--maxw), 100% - 2 * var(--gutter));
	max-width: var(--maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	background: var(--island);
	border-radius: 999px;
	padding: 0 2rem;
	height: var(--nav-h);
	line-height: 1;
}

/* every island item magnifies on hover (Mac-dock feel) */
.site-header__mark,
.site-nav a,
.site-header__cta {
	display: inline-block;
	white-space: nowrap;
	flex-shrink: 0;
	transition: font-size 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: font-size;
}

/* magnify by growing the actual font-size: siblings shift out and the island
   (shrink-to-fit) expands with it, instead of a fixed-size overlay scale */
.site-header__mark:hover { font-size: 27px; }
.site-nav a:hover { font-size: 22px; }

/* brand: GREYGRAM | Bangkok Based */
.site-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
}

.site-header__mark {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.site-brand__sep {
	font-family: 'Anthine', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: var(--ink);
	opacity: 0.28;
}

.site-brand__based {
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-size: 18px;
	letter-spacing: 0.025em;
	color: var(--ink);
	opacity: 0.38;
}

.site-nav {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-left: auto; /* push nav + CTA group to the far right */
}

.site-nav a {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--ink);
	opacity: 0.8;
}

.site-nav a:hover { opacity: 1; }

/* CTA: italic Baskerville, no capsule, underline on hover */
.site-header__cta {
	position: relative;
	line-height: 1; /* hug the text so the underline sits close (island height unaffected) */
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.025em;
	color: var(--ink);
	text-decoration: none;
}

/* underline that slides in from the left on hover */
.site-header__cta::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-header__cta:hover {
	font-size: 1.2rem;
	font-weight: 700;
}

.site-header__cta:hover::after {
	transform: scaleX(1);
}

/* ===== Hamburger button ===== */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 6px 2px;
	margin-left: auto;
	cursor: none;
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--ink);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== Mobile fullscreen nav overlay ===== */
.mobile-nav {
	position: fixed;
	top: calc(var(--nav-h) + 2.5rem + env(safe-area-inset-top));
	left: var(--gutter);
	right: var(--gutter);
	z-index: 99;
	background: var(--ink-deep);
	border-radius: 50px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 6vw, 4rem);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-nav.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-nav__links a {
	display: block;
	font-weight: 400;
	font-size: clamp(2rem, 10vw, 4rem);
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: var(--paper);
	padding: 0.2em 0;
	border-bottom: 0.5px solid rgba(231, 233, 234, 0.25);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;
}

.mobile-nav.is-open .mobile-nav__links a { opacity: 1; transform: translateY(0); }
.mobile-nav.is-open .mobile-nav__links a:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(2) { transition-delay: 0.1s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(4) { transition-delay: 0.2s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(5) { transition-delay: 0.25s; }

.mobile-nav__cta {
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 10vw, 4rem) !important;
	color: var(--grey-light) !important;
	border-bottom: none !important;
	margin-top: 1.5rem;
}

@media (max-width: 600px) {
	.site-nav { display: none; }
	.site-header__cta { display: none; }
	.nav-toggle { display: flex; }
	.site-header__inner { width: 100%; }
	.site-header__mark { font-size: 17.6px; }
	.site-brand__sep,
	.site-brand__based { display: none; }

	.site-footer__social {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.site-footer__group { flex-direction: column; align-items: flex-start; }
	.site-footer__group:last-child { align-items: flex-end; }
}

/* ===== Layout utility ===== */
.container {
	/* centred content box — maxw with viewport gutters, used by all sections */
	width: min(var(--maxw), 100% - 2 * var(--gutter));
	margin: 0 auto;
}

/* ===== Site footer ===== */
.site-footer {
	padding: 0 var(--gutter) var(--gutter);
}

/* each footer link is its own pill "island" — nav group left, social group right */
.site-footer__social {
	width: min(var(--maxw), 100% - 2 * var(--gutter));
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
}

.site-footer__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center; /* pills grow from their centre on hover, not the top */
	gap: 0.75rem;
}

.site-footer__social a {
	display: inline-block;
	padding: 0.7875rem 1.575rem;
	background: var(--ink-deep);
	color: var(--paper);
	border-radius: 999px;
	font-size: 1.06875rem;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.01em;
	transform-origin: center;
	transition:
		background 0.3s ease,
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-footer__social a:hover {
	background: var(--ink-deep-hover);
	transform: scale(1.15);
}