@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root { --ink:#24150f; --paper:#f1e9dc; --sand:#d8c7af; --rust:#a44923; --gold:#c59349; --night:#261712; --line:rgba(36,21,15,.17); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.22; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
.section { position:relative; padding:clamp(5.5rem,10vw,10rem) max(6vw,1.5rem); }
.eyebrow, .hero-meta, .future-stats, .nav-clock, .selected-date { margin:0; font:10px/1.4 'DM Mono',monospace; letter-spacing:.12em; }
.eyebrow { color:var(--rust); }
h1,h2,h3,p { margin-top:0; }
h2 { margin-bottom:0; font:clamp(2.7rem,6.4vw,6.8rem)/.98 'Playfair Display',serif; font-weight:600; letter-spacing:-.055em; }
h1 em,h2 em { font-weight:500; }
.page-progress { position:fixed; z-index:30; top:0; left:0; width:0; height:3px; background:var(--rust); }

.loading-screen { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#f7efe4; background:var(--night); transition:opacity .65s ease, visibility .65s ease; }
.loading-screen.done { opacity:0; visibility:hidden; }
.loading-copy { position:relative; z-index:1; width:min(80vw,520px); text-align:center; }
.loading-copy span { font:10px 'DM Mono',monospace; letter-spacing:.18em; color:#d7a967; }
.loading-copy h1 { margin:1rem 0; font:clamp(3rem,8vw,6rem)/.82 'Playfair Display',serif; letter-spacing:-.07em; }
.loading-copy p { margin:0; font:italic 1rem 'Playfair Display',serif; color:#cfc1b3; }
.loading-progress { position:absolute; right:7vw; bottom:8vh; left:7vw; height:1px; background:rgba(255,255,255,.2); }
.loading-progress::after { content:''; display:block; width:var(--progress,0%); height:100%; background:#e6b76e; transition:width .12s; }
.loading-progress strong { position:absolute; right:0; bottom:.75rem; font:11px 'DM Mono',monospace; color:#e6b76e; }
.loading-clock { position:absolute; width:min(50vw,410px); opacity:.22; }

.navbar { position:absolute; z-index:10; top:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.7rem max(4vw,1.25rem); color:#f5eddf; }
.wordmark { font:600 1.22rem 'DM Mono',monospace; letter-spacing:-.1em; }
.wordmark span { color:#d99b54; }
.navbar nav { display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.5rem); font:10px 'DM Mono',monospace; letter-spacing:.1em; }
.navbar nav a { opacity:.72; transition:opacity .2s; }
.navbar nav a:hover { opacity:1; }
.menu-toggle { display:none; border:0; background:none; cursor:pointer; }
.hero { position:relative; min-height:100svh; display:grid; place-items:center; isolation:isolate; overflow:hidden; color:#f7efe5; background:radial-gradient(circle at 49% 43%, #714527 0, #432415 29%, #261510 67%); }
.hero::before { content:''; position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg,rgba(0,0,0,.36),transparent 45%,rgba(0,0,0,.45)); }
.hero-noise { position:absolute; inset:0; opacity:.22; background:repeating-radial-gradient(ellipse at center,transparent 0 2px,rgba(255,255,255,.04) 3px 4px); }
.hero-copy { position:relative; z-index:2; width:min(89vw,960px); text-align:center; }
.hero-copy .eyebrow { color:#e3bc7e; }
.hero h1 { margin:.75rem 0 1.3rem; font:clamp(4.2rem,12.5vw,12.5rem)/.73 'Playfair Display',serif; letter-spacing:-.09em; }
.hero h1 em { color:#dfaa64; }
.hero-lede { max-width:300px; margin:0 auto; font-size:clamp(.92rem,1.4vw,1.12rem); color:#dbcfc0; }
.travel-link { display:inline-flex; gap:.8rem; margin-top:2.2rem; padding-bottom:.4rem; border-bottom:1px solid #d8a766; font:11px 'DM Mono',monospace; letter-spacing:.08em; }
.travel-link span { font-size:1.2rem; line-height:.6; }
.hero-meta { position:absolute; top:50%; color:#d4c2ad; opacity:.75; }
.hero-meta.left { left:4vw; transform:translateY(-50%); }
.hero-meta.right { right:4vw; transform:translateY(-50%) rotate(90deg); transform-origin:center; }
.hero-date { position:absolute; right:4vw; bottom:2.3rem; font:10px 'DM Mono',monospace; letter-spacing:.12em; color:#dec7a6; }
.hero-date span { color:#dc9a52; padding:0 .5rem; }

.clock { position:relative; aspect-ratio:1; border:1px solid rgba(234,201,149,.7); border-radius:50%; }
.hero-clock { position:absolute; width:min(68vw,720px); opacity:.58; }
.clock-face { position:absolute; inset:8%; border:1px solid rgba(234,201,149,.45); border-radius:50%; }
.clock-face::before, .clock-face::after { content:''; position:absolute; top:50%; left:50%; background:rgba(239,213,170,.38); transform:translate(-50%,-50%); }
.clock-face::before { width:1px; height:100%; }.clock-face::after { width:100%; height:1px; }
.clock-orbit { position:absolute; inset:-12%; border:1px solid rgba(222,168,88,.28); border-radius:47% 53% 47% 53%; animation:orbit 17s linear infinite; }
.orbit-b { inset:-21%; border-style:dashed; animation-direction:reverse; animation-duration:26s; }
.hand { position:absolute; z-index:2; bottom:50%; left:50%; width:2px; transform:translateX(-50%) rotate(var(--angle,0deg)); transform-origin:bottom; background:#f5d39d; }
.hour-hand { height:23%; }.minute-hand { height:33%; background:#edba71; }.second-hand { width:1px; height:39%; background:#c66033; }
.clock-pin { position:absolute; z-index:3; top:50%; left:50%; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); background:#e9b667; }
.roman { position:absolute; z-index:1; font:10px 'DM Mono',monospace; color:#f0cf9b; }.n12 { top:3%; left:50%; transform:translateX(-50%); }.n3 { top:50%; right:3%; transform:translateY(-50%); }.n6 { bottom:3%; left:50%; transform:translateX(-50%); }.n9 { top:50%; left:3%; transform:translateY(-50%); }
@keyframes orbit { to { transform:rotate(360deg); } }

.story { background:#e9dece; }
.section-heading { display:grid; grid-template-columns:1.35fr .65fr; gap:5vw; align-items:end; margin:2.1rem 0 5rem; }
.section-heading > p { max-width:380px; margin-bottom:.5rem; line-height:1.8; color:#65493e; }
.era-rail { display:grid; grid-template-columns:repeat(8,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.era { position:relative; min-height:150px; padding:1.3rem .85rem; border-right:1px solid var(--line); transition:background .25s; }
.era:last-child { border:0; }.era:hover { background:rgba(164,73,35,.1); }.era strong { display:block; font:11px 'DM Mono',monospace; color:var(--rust); }.era span { display:block; margin-top:3rem; font:italic 1.05rem 'Playfair Display',serif; }.era i { position:absolute; bottom:-5px; left:50%; width:9px; height:9px; border:1px solid var(--rust); border-radius:50%; background:var(--paper); }
.timekeeper { width:min(100%,610px); margin:4.5rem auto 0; padding:1rem 1.25rem; border-left:2px solid var(--rust); font:italic 1.06rem/1.55 'Playfair Display',serif; color:#61443a; }
.timekeeper::before { content:attr(data-dialogue); }

.history { display:grid; grid-template-columns:35% 65%; gap:3rem; min-height:110vh; background:#f6f0e6; }
.sticky-title { align-self:start; position:sticky; top:6rem; }.sticky-title h2 { margin:1rem 0 1.3rem; font-size:clamp(2.7rem,5.5vw,5.8rem); }.sticky-title > p:last-child { max-width:280px; line-height:1.7; color:#684c42; }
.history-preview { position:relative; display:grid; grid-template-columns:1fr .92fr; gap:.6rem; align-items:center; min-height:220px; margin-top:3rem; padding:1.15rem; overflow:hidden; color:#fff8ec; background:var(--preview-color); box-shadow:0 13px 25px rgba(71,40,27,.14); transition:background .35s ease; }.history-preview::before { content:''; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.26); pointer-events:none; }.history-preview-copy { position:relative; z-index:1; }.history-preview-copy > span { display:block; margin-bottom:.8rem; font:9px 'DM Mono',monospace; letter-spacing:.1em; color:#ffe0ad; }.history-preview-copy h3 { margin:0 0 .6rem; font:clamp(1.45rem,2.3vw,2.2rem)/.95 'Playfair Display',serif; }.history-preview-copy p { margin:0; font-size:.74rem; line-height:1.5; color:rgba(255,248,236,.82); }.history-preview-copy strong { display:block; margin-top:1.15rem; font:10px 'DM Mono',monospace; letter-spacing:.08em; color:#ffe5bc; }.history-preview-clock { width:clamp(115px,12vw,180px); justify-self:end; border-color:rgba(255,238,197,.74); }.history-preview-clock .clock-face { border-color:rgba(255,238,197,.48); }.history-preview-clock .hand { background:#fff5da; }.history-preview-clock .minute-hand { background:#ffd385; }.history-preview-clock .second-hand { background:#fff; }.history-preview-clock .roman { color:#fff2d5; font-size:8px; }
.clock-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
.history-card { min-height:285px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; border:0; text-align:left; color:#fbf5e9; background:var(--card-bg,#5a2b1e); cursor:pointer; transition:transform .3s,box-shadow .3s,outline-color .2s; overflow:hidden; }.history-card:focus-visible { outline:3px solid var(--rust); outline-offset:4px; }.history-card.selected { box-shadow:inset 0 0 0 2px #fff0c7,0 17px 25px rgba(57,29,19,.22); }
.history-card:nth-child(even) { margin-top:5rem; }.history-card:hover { transform:translateY(-7px); box-shadow:0 17px 25px rgba(57,29,19,.16); }.history-card::before { content:attr(data-index); margin-bottom:auto; font:10px 'DM Mono',monospace; opacity:.7; }.history-card span { font:10px 'DM Mono',monospace; color:#edbd7c; }.history-card h3 { margin:.6rem 0; font:2rem/.96 'Playfair Display',serif; }.history-card p { margin:0; font-size:.86rem; line-height:1.55; color:#eadccc; }

.clock-lab { min-height:100vh; color:#f6ebdc; background:#2a1913; }.lab-intro { width:min(640px,100%); }.lab-intro .eyebrow { color:#e0aa63; }.lab-intro h2 { margin:1rem 0; }.lab-intro > p:last-child { max-width:330px; line-height:1.7; color:#c8b5a5; }.lab-stage { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2rem; min-height:480px; margin-top:4.5rem; padding:4rem; border:1px solid rgba(240,216,175,.22); overflow:hidden; }.selected-date { position:absolute; top:1.3rem; left:1.4rem; color:#dfad68; }.lab-stage .clock { align-self:center; width:min(26vw,280px); margin:auto; }.gear { position:absolute; color:rgba(211,145,74,.14); font-size:18rem; line-height:1; animation:orbit 25s linear infinite; }.gear-one { top:-4rem; left:25%; }.gear-two { right:-4rem; bottom:-7rem; font-size:24rem; animation-direction:reverse; }.lab-detail { position:relative; z-index:1; align-self:end; }.lab-detail h3 { margin:0 0 1rem; font:clamp(2.2rem,4.4vw,4.5rem)/.9 'Playfair Display',serif; }.lab-detail p { max-width:350px; color:#d0bdad; line-height:1.7; }.part-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }.part-tags button { padding:.65rem .8rem; border:1px solid rgba(233,195,134,.4); color:#f7ecd9; background:transparent; cursor:pointer; font:10px 'DM Mono',monospace; transition:background .2s; }.part-tags button:hover,.part-tags button.active { background:#b45a30; border-color:#b45a30; }

.timeless { display:grid; grid-template-columns:1fr 1fr; gap:4vw; align-items:center; background:#ded2bf; }.timeless-words > p:not(.eyebrow) { max-width:350px; margin:1.7rem 0; line-height:1.7; color:#664a3f; }.time-switch { display:flex; gap:.7rem; align-items:center; padding:0; border:0; background:none; cursor:pointer; font:10px 'DM Mono',monospace; letter-spacing:.1em; }.switch-dot { display:block; width:26px; height:15px; padding:2px; border-radius:30px; background:#a44923; }.switch-dot::after { content:''; display:block; width:11px; height:11px; border-radius:50%; background:white; transition:transform .25s; }.timeless-visual { position:relative; display:grid; place-items:center; min-height:440px; }.timeless-visual .clock { width:min(31vw,330px); border-color:var(--rust); }.timeless-visual .clock-face { border-color:rgba(164,73,35,.5); }.time-ripples { position:absolute; width:min(42vw,470px); aspect-ratio:1; border:1px solid rgba(164,73,35,.26); border-radius:50%; animation:pulse 3s ease-out infinite; }.time-ripples::before,.time-ripples::after { content:''; position:absolute; inset:11%; border:1px solid rgba(164,73,35,.2); border-radius:inherit; }.time-ripples::after { inset:22%; }@keyframes pulse { 50% { transform:scale(1.08); opacity:.5; } }
body.timeless-mode { --paper:#1e1d1b; --ink:#e2d7c6; --line:rgba(236,224,204,.18); background:#1e1d1b; }.timeless-mode .story,.timeless-mode .timeless { background:#262421; }.timeless-mode .history { background:#201f1d; }.timeless-mode .section-heading > p,.timeless-mode .sticky-title > p:last-child,.timeless-mode .timeless-words > p:not(.eyebrow),.timeless-mode .timekeeper { color:#c8bbab; }.timeless-mode .era { border-color:var(--line); }.timeless-mode .switch-dot::after { transform:translateX(11px); }

.future { color:#f6ecdf; background:#7f351d; }.future-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; }.future h2 { margin:1rem 0 1.5rem; }.future .eyebrow { color:#f2ca8e; }.future-grid p:not(.eyebrow) { max-width:400px; color:#efd5b9; line-height:1.7; }.future-question { display:block; margin-top:3rem; color:#f3c47d; font:italic 1.4rem 'Playfair Display',serif; }.clock.future { width:min(34vw,360px); margin:auto; }.future-stats { display:flex; justify-content:space-between; gap:1rem; margin-top:5rem; padding-top:1.3rem; border-top:1px solid rgba(255,233,195,.3); color:#f2d0a6; }
.final { display:flex; min-height:90vh; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:#e7ddcc; }.final h2 { margin:1rem 0; position:relative; z-index:1; }.final > p:last-of-type { color:#765b4f; }.final-clock { position:absolute; width:min(68vw,660px); opacity:.26; border-color:#9a512f; }.restart { position:relative; z-index:1; margin-top:1.5rem; padding:.7rem 1rem; border:1px solid var(--rust); background:transparent; color:var(--rust); cursor:pointer; font:10px 'DM Mono',monospace; letter-spacing:.1em; transition:all .2s; }.restart:hover { color:#f7ecde; background:var(--rust); }

.victory-modal { position:fixed; z-index:100; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; display:grid; place-items:center; padding:1.25rem; overflow:hidden; border:0; background:rgba(35,13,13,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .45s ease; }.victory-modal:not([open]) { display:none; }.victory-modal::backdrop { background:rgba(35,13,13,.72); backdrop-filter:blur(6px); }.victory-modal.show { opacity:1; }.victory-card { position:relative; z-index:1; width:min(100%,540px); padding:clamp(2.7rem,7vw,4.4rem) clamp(1.5rem,6vw,4.25rem) 2.75rem; text-align:center; color:#fff; overflow:hidden; background:linear-gradient(145deg,#ce2430,#9e101c 58%,#7c0a14); box-shadow:0 30px 80px rgba(20,0,0,.52); animation:victory-arrival .55s cubic-bezier(.2,.8,.2,1) both; }.victory-card::before { content:''; position:absolute; inset:13px; border:1px solid rgba(255,255,255,.44); pointer-events:none; }.victory-card::after { content:'✦'; position:absolute; right:1.9rem; bottom:1.2rem; color:rgba(255,255,255,.42); font-size:2rem; }.victory-close { position:absolute; z-index:2; top:.7rem; right:.85rem; width:34px; height:34px; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:transparent; cursor:pointer; font-size:1.6rem; line-height:1; transition:background .2s; }.victory-close:hover { background:rgba(255,255,255,.17); }.turkish-flag { display:block; width:min(178px,54vw); height:auto; margin:0 auto 1.6rem; box-shadow:0 8px 17px rgba(66,0,0,.26); }.victory-kicker { position:relative; margin:0 0 .9rem; font:10px 'DM Mono',monospace; letter-spacing:.18em; color:#ffe0b1; }.victory-card h2 { position:relative; margin:0; font:clamp(2.5rem,7vw,4.5rem)/.86 'Playfair Display',serif; letter-spacing:-.07em; }.victory-card h2 em { color:#ffe0b1; }.victory-developer { position:relative; margin:1.65rem 0 0; font-size:.85rem; letter-spacing:.03em; color:#ffe5e3; }.victory-developer strong { color:#fff; }.victory-confetti { position:absolute; inset:0; pointer-events:none; }.confetti-piece { position:absolute; top:-10vh; width:9px; height:16px; background:var(--confetti-color); animation:confetti-fall var(--fall-duration) linear var(--fall-delay) infinite; transform:rotate(var(--confetti-rotate)); }.confetti-piece:nth-child(3n) { width:14px; height:7px; border-radius:50%; }.confetti-piece:nth-child(4n) { width:6px; height:18px; }.victory-modal.closing .victory-card { animation:victory-leave .35s ease both; }.victory-modal.closing { opacity:0; }@keyframes victory-arrival { from { opacity:0; transform:translateY(28px) scale(.93); } to { opacity:1; transform:none; } }@keyframes victory-leave { to { opacity:0; transform:scale(.94); } }@keyframes confetti-fall { from { transform:translate3d(0,-10vh,0) rotate(0deg); } to { transform:translate3d(var(--confetti-drift),112vh,0) rotate(680deg); } }

@media (max-width:760px) { .navbar nav { position:absolute; top:0; right:0; display:none; width:210px; padding:5rem 2rem 2rem; flex-direction:column; align-items:flex-start; background:#2a1913; }.navbar nav.open { display:flex; }.menu-toggle { position:relative; z-index:2; display:grid; gap:5px; padding:7px; }.menu-toggle i { width:20px; height:1px; background:#fff; }.nav-clock { display:none; }.hero-meta { display:none; }.hero-clock { width:100vw; }.section-heading,.history,.timeless,.future-grid { grid-template-columns:1fr; }.section-heading { gap:1rem; margin-bottom:3.5rem; }.era-rail { grid-template-columns:repeat(4,1fr); }.era { min-height:110px; }.history { gap:3rem; }.sticky-title { position:static; }.clock-cards { gap:.75rem; }.history-card { min-height:245px; padding:1rem; }.history-card:nth-child(even) { margin-top:2.5rem; }.lab-stage { grid-template-columns:1fr; padding:4rem 1.25rem 2rem; min-height:600px; }.lab-stage .clock { width:min(62vw,280px); }.timeless-visual { min-height:300px; }.timeless-visual .clock { width:min(58vw,290px); }.time-ripples { width:76vw; }.future-grid { gap:3rem; }.clock.future { width:min(66vw,330px); }.future-stats { flex-direction:column; margin-top:3rem; }.final { min-height:75vh; }.final-clock { width:105vw; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }