/*
Theme Name: Remontoir
Description: Independent haute horlogerie atelier.
Version: 1.0
*/

/* ============================================================
   Remontoir's structural principle: the homepage IS one continuous
   3D scene — a full-viewport movement (calibre) render fixed behind
   the page, with the scrollbar acting as the camera's timeline. As
   the visitor scrolls the story zone, the camera pushes in and the
   movement explodes apart layer by layer (barrel → gear train →
   escapement → balance), each DOM narration block synced to a stage
   of the disassembly. No prior theme in this project used scroll as
   a literal camera timeline through a single persistent scene.
   This build is also the project's rendering-pipeline generation
   jump: ES-module Three.js r160 via importmap (every prior theme
   used the 2021-era r128 UMD build), MeshPhysicalMaterial PBR,
   procedural environment lighting, ACES filmic tone mapping, and an
   EffectComposer post chain. Palette: graphite noir + champagne
   gold + rhodium — luxury horlogerie, a sector and hue trio not
   used before. Typography: Cormorant Garamond (light, enormous) +
   Jost + Fragment Mono.
   ============================================================ */
:root {
	--noir: #0C0B09;
	--panel: #14120F;
	--panel-2: #191713;
	--panel-3: #201D18;
	--line: rgba(216, 194, 154, 0.14);
	--line-strong: rgba(216, 194, 154, 0.32);
	--ink: #EFEAE0;
	--ink-dim: #B0A794;
	--ink-mute: #6E6656;
	--champagne: #D8C29A;
	--champagne-bright: #F0DEBB;
	--rhodium: #A9B2BC;
	--font-display: 'Cormorant Garamond', serif;
	--font-body: 'Jost', sans-serif;
	--font-mono: 'Fragment Mono', monospace;
	--ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--noir);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--champagne); color: var(--noir); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.06; letter-spacing: 0.01em; margin: 0 0 0.4em; color: var(--ink); }
h1 { font-size: clamp(46px, 7vw, 118px); }
h2 { font-size: clamp(30px, 4vw, 58px); }
h3 { font-size: clamp(19px, 2vw, 25px); font-style: italic; }
p { margin: 0 0 1.1em; color: var(--ink-dim); }
.mono { font-family: var(--font-mono); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

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

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 36px; border: 1px solid var(--champagne); border-radius: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); background: transparent; transition: background 0.45s var(--ease-luxe), color 0.45s var(--ease-luxe); cursor: pointer; }
.btn:hover { background: var(--champagne); color: var(--noir); }
.btn.solid { background: var(--champagne); color: var(--noir); }
.btn.solid:hover { background: var(--champagne-bright); border-color: var(--champagne-bright); }
.btn.ghost { border-color: var(--line-strong); color: var(--ink-dim); }
.btn.ghost:hover { border-color: var(--ink-dim); color: var(--ink); background: transparent; }

.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ============================================================
   Preloader — the "winding" ritual
   ============================================================ */
#pre { position: fixed; inset: 0; z-index: 500; background: var(--noir); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; transition: opacity 0.9s var(--ease-luxe), visibility 0.9s; }
#pre.done { opacity: 0; visibility: hidden; }
#pre .pre-crown { width: 46px; height: 46px; border: 1px solid var(--champagne); border-radius: 50%; position: relative; animation: crown-wind 2.2s var(--ease-luxe) infinite; }
#pre .pre-crown::before { content: ''; position: absolute; top: 50%; left: 50%; width: 1px; height: 16px; background: var(--champagne); transform-origin: top center; transform: translate(-50%, 0); }
@keyframes crown-wind { 0% { transform: rotate(0deg); } 55% { transform: rotate(300deg); } 100% { transform: rotate(360deg); } }
#pre .pre-word { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--ink-dim); padding-left: 0.45em; }
#pre .pre-bar { width: 180px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
#pre .pre-bar span { position: absolute; inset: 0; background: var(--champagne); transform: scaleX(0); transform-origin: left; transition: transform 0.3s linear; }

/* ============================================================
   Header
   ============================================================ */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 26px 0; transition: background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.site-head.scrolled { background: rgba(12, 11, 9, 0.82); backdrop-filter: blur(14px); border-color: var(--line); }
.head-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; }
.logo { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); padding-left: 0.34em; }
.main-nav ul { list-style: none; display: flex; gap: 36px; margin: 0; padding: 0; }
.main-nav a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.3s; }
.main-nav a:hover { color: var(--champagne); }
.nav-toggle { display: none; background: none; border: 1px solid var(--champagne); color: var(--champagne); font-size: 10px; letter-spacing: 0.14em; padding: 8px 16px; cursor: pointer; font-family: var(--font-mono); text-transform: uppercase; }
.mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--noir); transform: translateY(-100%); transition: transform 0.55s var(--ease-luxe); 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: 20px 0; font-family: var(--font-display); font-size: 34px; font-style: italic; color: var(--ink); }
.mn-close { position: absolute; top: 26px; right: 34px; background: none; border: 1px solid var(--champagne); color: var(--champagne); font-size: 20px; padding: 4px 13px; cursor: pointer; }
@media (max-width: 960px) { .main-nav { display: none; } .nav-toggle { display: block; } }

/* ============================================================
   Structural device: the calibre plate
   ============================================================ */
.calibre-plate { display: inline-flex; flex-wrap: wrap; gap: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.calibre-plate b { color: var(--champagne); font-weight: 400; }

/* ============================================================
   The story zone — scroll-as-camera-timeline. The canvas is fixed
   full-viewport; .story-track provides the scroll length; each
   .story-beat is a full-height narration stop synced to a stage of
   the movement's disassembly.
   ============================================================ */
#movementCanvas { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; background: radial-gradient(ellipse 70% 55% at 50% 42%, #1b1712 0%, var(--noir) 70%); }
.story-track { position: relative; z-index: 2; }
.story-beat { min-height: 100vh; display: flex; align-items: center; padding: 0 3vw; }
.story-beat .beat-card { max-width: 430px; }
.story-beat.beat-right { justify-content: flex-end; }
.story-beat.beat-center { justify-content: center; text-align: center; }
.story-beat .beat-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--rhodium); display: block; margin-bottom: 16px; }
.story-beat .beat-card p { font-size: 16px; }
.story-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 3vw; }
.story-hero .hero-lede { max-width: 520px; font-size: 17px; margin-top: 8px; }
.story-hero .hero-cta { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scroll-cue::after { content: ''; width: 1px; height: 42px; background: linear-gradient(180deg, var(--champagne), transparent); animation: cue-drop 2s var(--ease-luxe) infinite; }
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* After the story zone, content sections sit on solid ground so the
   fixed canvas doesn't fight readability. */
.post-story { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(12,11,9,0) 0%, var(--noir) 8%, var(--noir) 100%); }

/* ============================================================
   Masked line reveal — headings enter as lines rising out of an
   overflow-hidden mask, staggered; the project's prior themes used
   uniform fade-up only.
   ============================================================ */
.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease-luxe); }
.shown .mask-line > span, .mask-line.shown > span { transform: translateY(0); }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease-luxe), transform 1s var(--ease-luxe); }
[data-reveal].shown { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-luxe), transform 0.9s var(--ease-luxe); }
[data-reveal-stagger].shown > * { opacity: 1; transform: none; }
[data-reveal-stagger].shown > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].shown > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].shown > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].shown > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].shown > *:nth-child(6) { transition-delay: 0.4s; }

/* ============================================================
   Unified photographic grade — every photo on the site passes
   through the same warm-graded, slightly lifted treatment so
   photography and the 3D scene share one light language.
   ============================================================ */
.graded { position: relative; overflow: hidden; }
.graded img { filter: sepia(0.22) saturate(0.82) contrast(1.04) brightness(0.92); transition: transform 1.2s var(--ease-luxe); }
.graded::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(216,194,154,0.10) 0%, rgba(12,11,9,0.18) 100%); pointer-events: none; }
.graded:hover img { transform: scale(1.04); }

/* ============================================================
   Collection rail (timepieces)
   ============================================================ */
.collection-section { padding: 130px 0; }
.tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.tp-card { border: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.45s var(--ease-luxe), transform 0.45s var(--ease-luxe); }
.tp-card:hover { border-color: var(--line-strong); transform: translateY(-5px); }
.tp-card .tp-media { aspect-ratio: 4/5; overflow: hidden; }
.tp-card .tp-media img { width: 100%; height: 100%; object-fit: cover; }
.tp-card .tp-body { padding: 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tp-card .tp-coll { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rhodium); }
.tp-card h3 { margin: 0; font-style: normal; }
@media (max-width: 980px) { .tp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Atelier split + specs band + journal + press + CTA
   ============================================================ */
.atelier-split { padding: 40px 0 130px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.atelier-split .as-media img { aspect-ratio: 4/5; object-fit: cover; }
.atelier-copy blockquote { border-left: 1px solid var(--champagne); margin: 1.6em 0; padding-left: 26px; font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink); }
@media (max-width: 900px) { .atelier-split { grid-template-columns: 1fr; } }

.specs-band { padding: 110px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
.specs-grid .stat b { font-family: var(--font-display); font-size: clamp(34px, 4vw, 54px); font-weight: 300; color: var(--ink); display: block; }
.specs-grid .stat b .counter { color: var(--champagne); }
.specs-grid .stat span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 800px) { .specs-grid { grid-template-columns: 1fr 1fr; } }

.journal-section { padding: 130px 0; }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.journal-card { border: 1px solid var(--line); overflow: hidden; background: var(--panel); transition: border-color 0.45s var(--ease-luxe); }
.journal-card:hover { border-color: var(--line-strong); }
.journal-card .jc-media { aspect-ratio: 16/10; overflow: hidden; }
.journal-card .jc-media img { width: 100%; height: 100%; object-fit: cover; }
.journal-card .jc-body { padding: 24px; }
.journal-card .jc-date { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.18em; }
.journal-card h3 { margin: 12px 0 8px; font-size: 20px; font-style: normal; }
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; } }

.press-band { padding: 90px 0; border-top: 1px solid var(--line); }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.press-quote p { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--ink); }
.press-quote span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.14em; }
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr; } }

.cta-band { padding: 150px 0; text-align: center; }
.cta-band h2 { max-width: 700px; margin: 0 auto 34px; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot { border-top: 1px solid var(--line); padding: 80px 0 34px; background: var(--panel); position: relative; z-index: 2; }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; }
.foot-brand .logo { margin-bottom: 16px; display: inline-block; }
.foot-brand p { max-width: 300px; font-size: 14px; }
.foot-col h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 18px; }
.foot-col .foot-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col .foot-menu a { font-size: 14px; color: var(--ink-dim); transition: color 0.3s; }
.foot-col .foot-menu a:hover { color: var(--champagne); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; }
.foot-bottom span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } }

/* ============================================================
   Inner pages
   ============================================================ */
.page-hero { padding: 170px 0 70px; position: relative; z-index: 2; }
.page-hero .lede { max-width: 620px; font-size: 18px; }
.content-wrap { max-width: 740px; margin: 0 auto; padding: 0 40px 130px; position: relative; z-index: 2; }
.content-wrap h2 { margin-top: 1.4em; }
.content-wrap blockquote { border-left: 1px solid var(--champagne); margin: 2em 0; padding-left: 26px; font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0 3vw 130px; position: relative; z-index: 2; }
@media (max-width: 900px) { .archive-grid { grid-template-columns: 1fr; } }
.filter-pills { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 3vw 44px; position: relative; z-index: 2; }
.filter-pills a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; border: 1px solid var(--line); color: var(--ink-dim); transition: border-color 0.3s, color 0.3s; }
.filter-pills a.active, .filter-pills a:hover { border-color: var(--champagne); color: var(--champagne); }

.single-tp-head { padding: 170px 0 60px; position: relative; z-index: 2; }
.single-tp-meta { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.single-tp-meta .m-item span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px; }
.single-tp-meta .m-item b { font-family: var(--font-display); font-size: 19px; font-weight: 400; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 0 3vw 130px; position: relative; z-index: 2; }
.contact-form label { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px; }
.contact-form input, .contact-form textarea { width: 100%; background: var(--panel); border: 1px solid var(--line); padding: 13px 15px; color: var(--ink); font-family: var(--font-body); margin-bottom: 22px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--champagne); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.error-404 { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; position: relative; z-index: 2; }
.error-404 .code { font-family: var(--font-mono); font-size: 12px; color: var(--rhodium); letter-spacing: 0.22em; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 1px; background: var(--champagne); z-index: 300; width: 0%; }

/* Cross-document page transition (View Transitions API — progressive
   enhancement, ignored by browsers without support). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.4s var(--ease-luxe) both; }
::view-transition-new(root) { animation: vt-in 0.55s var(--ease-luxe) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.mask-line > span { transform: none !important; transition: none !important; }
	.scroll-cue::after, #pre .pre-crown { animation: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}