/*
Theme Name: Emberline
Description: Contemporary glassblowing studio & hot shop.
Version: 1.0
*/

/* ============================================================
   Design tokens — warm charcoal (not the cold blacks of prior
   dark themes) with a molten amber-to-ember gradient reserved
   for glow moments. Typography is Bricolage Grotesque, a true
   variable font whose width/weight axes are animated on scroll
   — a technique no prior theme in this project has used.
   ============================================================ */
:root {
	--coal: #16110D;
	--coal-raised: #1F1812;
	--smoke: #2B221A;
	--line: rgba(255, 214, 170, 0.13);
	--line-strong: rgba(255, 214, 170, 0.3);
	--bone: #F4E9DC;
	--bone-dim: #B3A395;
	--bone-faint: #776a5e;
	--amber: #FFA028;
	--ember: #FF4D1C;
	--molten: linear-gradient(115deg, #FFC24B 0%, #FF8A1E 45%, #FF4D1C 100%);
	--font-display: 'Bricolage Grotesque', sans-serif;
	--font-body: 'Instrument Sans', sans-serif;
	--font-mono: 'Martian Mono', monospace;
	--wrap: 1220px;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--coal);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 34px; }
::selection { background: var(--amber); color: var(--coal); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 640;
	font-variation-settings: 'wdth' 90, 'opsz' 48;
	letter-spacing: -0.015em;
	line-height: 1.0;
	margin: 0 0 0.4em;
	color: var(--bone);
}
h1 { font-size: clamp(46px, 7vw, 104px); }
h2 { font-size: clamp(30px, 4vw, 54px); }
h3 { font-size: clamp(18px, 1.9vw, 22px); font-family: var(--font-body); font-weight: 600; font-variation-settings: normal; }
p { margin: 0 0 1em; color: var(--bone-dim); }
.mono { font-family: var(--font-mono); }

/* Molten text: gradient-filled display type, used only on the
   hero keyword and one pull-line per page. */
.molten-text {
	background: var(--molten);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amber);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--amber); }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bone);
	background: transparent;
	transition: border-color 0.25s, color 0.25s, background 0.25s, box-shadow 0.25s;
	cursor: pointer;
}
.btn:hover { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 24px rgba(255, 160, 40, 0.18); }
.btn.primary { background: var(--molten); color: var(--coal); border: 0; font-weight: 700; }
.btn.primary:hover { box-shadow: 0 0 34px rgba(255, 138, 30, 0.4); color: var(--coal); }

/* ============================================================
   Kiln gauge — a fixed vertical temperature rail on the right
   edge whose mercury column and readout are driven ENTIRELY by
   native CSS scroll-driven animation (animation-timeline:
   scroll()) — zero JavaScript. Browsers without support simply
   never see the column move; the rail stays as a static
   ornament, and main.js adds a JS fallback where possible.
   ============================================================ */
@keyframes kiln-fill { from { transform: scaleY(0.04); } to { transform: scaleY(1); } }
@keyframes kiln-hue { from { background-color: #5a3617; } to { background-color: #FF4D1C; } }
.kiln-gauge {
	position: fixed; top: 50%; right: 22px; transform: translateY(-50%);
	width: 5px; height: 42vh; z-index: 90;
	border: 1px solid var(--line-strong); border-radius: 3px;
	overflow: hidden; pointer-events: none;
}
.kiln-gauge .mercury {
	position: absolute; inset: 1px;
	transform-origin: bottom; transform: scaleY(0.04);
	background-color: #5a3617;
	animation: kiln-fill linear both, kiln-hue linear both;
	animation-timeline: scroll(root);
}
.kiln-gauge .tick { position: absolute; left: -5px; width: 15px; height: 1px; background: var(--line-strong); }
.kiln-gauge .tick.t25 { top: 25%; } .kiln-gauge .tick.t50 { top: 50%; } .kiln-gauge .tick.t75 { top: 75%; }
.kiln-label {
	position: fixed; right: 14px; top: calc(50% + 22vh + 14px); z-index: 90;
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
	color: var(--bone-faint); writing-mode: vertical-rl; pointer-events: none;
}
@media (max-width: 900px) { .kiln-gauge, .kiln-label { display: none; } }

/* ============================================================
   Heat-shimmer: an animated SVG feTurbulence displacement filter
   (defined inline in header.php) applied to imagery on hover —
   the picture wobbles like air over a glory hole. First use of
   animated SVG filters in this project.
   ============================================================ */
.heat-shimmer:hover img { filter: url(#heatShimmer); }

/* ============================================================
   Ember canvas (GPGPU simulation) — fixed, sitewide, behind all
   ============================================================ */
#emberCanvas {
	position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%;
	background:
		radial-gradient(ellipse 90% 60% at 50% 110%, #2b160a 0%, rgba(43, 22, 10, 0) 60%),
		var(--coal);
}
.grain {
	position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Header
   ============================================================ */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 0; transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.site-head.scrolled { background: rgba(22, 17, 13, 0.82); backdrop-filter: blur(14px); border-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 84; font-size: 23px; color: var(--bone); display: flex; align-items: center; gap: 10px; }
.logo .flame { width: 10px; height: 14px; background: var(--molten); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; flex-shrink: 0; box-shadow: 0 0 14px rgba(255, 138, 30, 0.7); }
.main-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.main-nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bone-dim); }
.main-nav a:hover { color: var(--amber); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); color: var(--bone); font-size: 11px; letter-spacing: 0.08em; padding: 8px 14px; cursor: pointer; font-family: var(--font-mono); border-radius: 999px; }

.mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--coal-raised); transform: translateY(-100%); transition: transform 0.4s cubic-bezier(.7,0,.3,1); display: flex; flex-direction: column; }
.mobile-nav.open { transform: translateY(0); }
.mobile-nav ul { list-style: none; margin: auto 0; padding: 0 40px; }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 17px 0; font-family: var(--font-display); font-weight: 640; font-size: 30px; color: var(--bone); }
.mn-close { position: absolute; top: 24px; right: 30px; background: none; border: 1px solid var(--line-strong); color: var(--bone); font-size: 20px; padding: 4px 13px; cursor: pointer; border-radius: 999px; }

@media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: block; } }

/* ============================================================
   Melt-log marker — Emberline's structural device: furnace
   temperature + melt number, in place of the folios/field-logs/
   timecodes used on prior themes.
   ============================================================ */
.meltlog {
	display: flex; align-items: baseline; gap: 14px; font-family: var(--font-mono); font-size: 11px;
	color: var(--bone-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 22px;
}
.meltlog .ml-temp { color: var(--amber); }
.meltlog .ml-temp::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--molten); vertical-align: middle; box-shadow: 0 0 10px rgba(255, 138, 30, 0.8); }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-canvas-wrap { position: absolute; inset: 0; z-index: 0; }
#gatherCanvas { width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 760px; }
.hero h1 { margin-top: 18px; }
/* the hero title's variable-font axes are driven by scroll in main.js */
.hero h1 .vf-morph { display: inline-block; }
.hero-lede { max-width: 480px; font-size: 18px; margin-top: 24px; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-foot {
	position: absolute; bottom: 34px; left: 0; right: 0; z-index: 2;
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint);
}
.hero-foot .wrap { display: flex; justify-content: space-between; }

/* ============================================================
   Section rhythm
   ============================================================ */
.section { padding: 130px 0; position: relative; }
.section-head { max-width: 700px; margin-bottom: 60px; }
.section-head p { font-size: 17px; max-width: 540px; }

/* ============================================================
   Editorial spreads — pieces presented as alternating magazine
   spreads (image one side, oversized numeral + copy the other),
   NOT a card grid. The layout novelty of this theme.
   ============================================================ */
.spread { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; padding: 70px 0; border-top: 1px solid var(--line); }
.spread:first-of-type { border-top: 0; }
.spread.flip .spread-img { order: 2; }
.spread-img { position: relative; overflow: hidden; border-radius: 4px; }
.spread-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.spread:hover .spread-img img { transform: scale(1.04); }
.spread-num {
	font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 75;
	font-size: clamp(70px, 9vw, 150px); line-height: 0.8; color: transparent;
	-webkit-text-stroke: 1px rgba(255, 214, 170, 0.25);
}
.spread-body h3 { font-family: var(--font-display); font-weight: 640; font-size: clamp(24px, 2.8vw, 36px); margin-top: 18px; }
.spread-meta { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--bone-faint); text-transform: uppercase; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.spread-meta .sm-temp { color: var(--amber); }
@media (max-width: 880px) { .spread { grid-template-columns: minmax(0, 1fr); gap: 30px; } .spread.flip .spread-img { order: 0; } }

/* ============================================================
   Technique band
   ============================================================ */
.technique-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--line); border-radius: 4px; overflow: hidden; }
.technique-cell { background: var(--coal-raised); padding: 30px 26px; transition: background 0.3s; }
.technique-cell:hover { background: var(--smoke); }
.technique-cell .tc-temp { font-family: var(--font-mono); font-size: 11px; color: var(--amber); }
.technique-cell h3 { margin-top: 10px; }
.technique-cell p { font-size: 14px; margin: 8px 0 0; }
@media (max-width: 940px) { .technique-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .technique-band { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Stats
   ============================================================ */
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-cell { padding: 34px 22px; border-right: 1px solid var(--line); }
.stat-cell:last-child { border-right: 0; }
.sc-num { font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 80; font-size: 44px; color: var(--bone); }
.sc-label { font-family: var(--font-mono); font-size: 10px; color: var(--bone-faint); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 900px) { .stat-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stat-cell { border-bottom: 1px solid var(--line); } }

/* ============================================================
   Voices / gaffer notes
   ============================================================ */
.gaffer-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.gaffer-card { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.gaffer-card .gc-role { font-family: var(--font-mono); font-size: 10px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.08em; }
.gaffer-card blockquote { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: 14px 0; line-height: 1.3; color: var(--bone); }
.gaffer-card cite { font-style: normal; font-size: 13px; color: var(--bone-faint); }
@media (max-width: 900px) { .gaffer-band { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Journal
   ============================================================ */
.notebook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.notebook-card { border-top: 1px solid var(--line-strong); padding-top: 20px; transition: opacity 0.2s; }
.notebook-card:hover { opacity: 0.72; }
.notebook-card .nc-date { font-size: 10px; color: var(--amber); margin-bottom: 10px; display: block; font-family: var(--font-mono); text-transform: uppercase; }
@media (max-width: 900px) { .notebook-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   CTA
   ============================================================ */
.cta-band { padding: 140px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
	content: ''; position: absolute; left: 50%; bottom: -40%; width: 900px; height: 500px;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(ellipse, rgba(255, 118, 24, 0.16) 0%, rgba(255, 118, 24, 0) 65%);
	pointer-events: none;
}
.cta-band .wrap { position: relative; }
.cta-band h2 { max-width: 740px; margin: 0 auto 20px; }
.cta-band p { max-width: 540px; margin: 0 auto 34px; }

/* ============================================================
   Footer — colophon-style asymmetric block, hairline rows
   ============================================================ */
.site-foot { padding: 80px 0 38px; border-top: 1px solid var(--line-strong); }
.foot-log { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; padding-bottom: 42px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.fl-brand p { max-width: 340px; margin-top: 16px; font-size: 14px; }
.fl-melt { justify-self: end; text-align: right; border-left: 1px solid var(--line-strong); padding-left: 34px; max-width: 420px; }
.fl-melt .eyebrow { justify-content: flex-end; }
.fl-melt-big { font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 80; font-size: clamp(22px, 2.6vw, 32px); margin: 12px 0 6px; }
.fl-melt-big .molten-text { font-family: inherit; }
.fl-melt-note { font-size: 13px; color: var(--bone-faint); font-family: var(--font-mono); }
.foot-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 36px; }
.fr-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.fr-label { width: 92px; flex-shrink: 0; color: var(--bone-faint); text-transform: uppercase; letter-spacing: 0.07em; font-size: 10px; font-family: var(--font-mono); }
.fr-row li { list-style: none; margin: 0; }
.fr-row > a, .fr-row li a { color: var(--bone-dim); font-size: 14px; }
.fr-row > a:hover, .fr-row li a:hover { color: var(--amber); }
.foot-bottom { display: flex; justify-content: space-between; font-size: 11px; color: var(--bone-faint); font-family: var(--font-mono); flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .foot-log { grid-template-columns: minmax(0, 1fr); } .fl-melt { justify-self: start; text-align: left; border-left: 0; border-top: 1px solid var(--line-strong); padding-left: 0; padding-top: 24px; } .fl-melt .eyebrow { justify-content: flex-start; } .fr-row { flex-direction: column; gap: 8px; } }

/* ============================================================
   Single/archive/pages
   ============================================================ */
.page-hero { padding: 195px 0 56px; border-bottom: 1px solid var(--line-strong); }
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; padding: 76px 0; }
.detail-facts { border-top: 1px solid var(--line-strong); padding-top: 24px; align-self: start; position: sticky; top: 110px; }
.detail-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 11px 16px; margin: 0; }
.detail-facts dt { font-family: var(--font-mono); font-size: 10px; color: var(--bone-faint); text-transform: uppercase; }
.detail-facts dd { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--amber); text-align: right; }
.detail-body img { margin: 28px 0; border-radius: 4px; }
.detail-body p { font-size: 17px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } .detail-facts { position: static; } }

.archive-spreads .spread { padding: 56px 0; }
.region-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.region-filter a { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); }
.region-filter a.active, .region-filter a:hover { border-color: var(--amber); color: var(--amber); }

.simple-page { padding: 195px 0 130px; }
.simple-page .content { max-width: 700px; }
.contact-form { display: grid; gap: 18px; max-width: 540px; margin-top: 28px; }
.contact-form label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--bone-faint); display: block; margin-bottom: 7px; }
.contact-form input, .contact-form textarea { width: 100%; background: var(--coal-raised); border: 1px solid var(--line); color: var(--bone); padding: 13px 15px; font-family: var(--font-body); font-size: 15px; border-radius: 3px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--amber); }

.notfound { padding: 215px 0; text-align: center; }
.notfound .nf-code { font-family: var(--font-mono); font-size: 12px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; }

/* ============================================================
   Reveal baseline
   ============================================================ */
[data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.kiln-gauge .mercury { animation: none; transform: scaleY(1); background-color: #5a3617; }
}

#pre { position: fixed; inset: 0; z-index: 999; background: var(--coal); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s, visibility 0.5s; }
#pre .pre-mark { font-family: var(--font-mono); font-size: 12px; color: var(--amber); letter-spacing: 0.12em; }
#pre.done { opacity: 0; visibility: hidden; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--molten); z-index: 300; width: 0%; }