/* Ground Zero — site styles. Monochrome: the surface is night, the floor is paper. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --night: #0f0f0f;
  --tower: #1c1c1c;
  --night-text: #f1ede4;
  --night-muted: #8d8d8d;
  --paper: #e7e1d4;
  --paper-text: #1a1814;
  --paper-muted: #5d574c;
  --rule: #c9c1b0;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --gutter: clamp(24px, 4vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { background: var(--paper); color: var(--paper-text); font: 400 17px/1.6 var(--sans); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.label { font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 400; }

/* nav */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px var(--gutter); background: var(--night); color: #bbb; }
.nav .logo img { width: 180px; height: auto; }
.nav ul { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav a { text-decoration: none; }
.nav a:hover { color: #fff; }
.pill { white-space: nowrap; display: inline-block; background: var(--paper); color: var(--night) !important; padding: 9px 14px; }
.nav--paper { background: var(--paper); color: var(--paper-text); }
.nav--paper .pill { background: var(--paper-text); color: var(--paper) !important; }

/* hero: the surface and the floor */
.surface, .floor { display: grid; grid-template-columns: minmax(380px, 5fr) minmax(0, 6fr); column-gap: 48px; padding: 0 var(--gutter); }
.towers, .roots { width: 100%; max-width: 744px; justify-self: end; }
.surface { background: var(--night); color: var(--night-text); align-items: end; padding-top: 40px; }
.floor { align-items: start; padding-bottom: 140px; }
.hero-title { font: 400 clamp(46px, 6.4vw, 88px)/1.02 var(--serif); letter-spacing: -.01em; }
.surface .copy { align-self: center; padding-bottom: 60px; }
.surface p { color: var(--night-muted); max-width: 420px; margin-top: 24px; }
.floor .copy { padding-top: 70px; }
.floor p { color: var(--paper-muted); max-width: 460px; margin-top: 24px; }
.towers rect { fill: var(--tower); }
.towers text { fill: #777; font: 500 10px var(--sans); letter-spacing: 2px; }
.roots path { fill: none; stroke: var(--paper-text); stroke-width: 1.1; }
.roots circle { fill: var(--paper-text); }
.roots .ring { fill: none; stroke: var(--paper-text); }
.roots text { fill: var(--paper-text); font: 500 11px var(--sans); letter-spacing: 2.6px; }

/* doors: three towers standing on the floor line */
.doors { padding: 110px var(--gutter) 0; }
.door-list, .floor-note { max-width: 1440px; }
.doors > .label { color: var(--paper-muted); margin-bottom: 36px; }
.door-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; list-style: none; border-bottom: 2px solid var(--paper-text); }
.door { background: var(--night); color: var(--night-text); padding: 36px 32px 40px; display: flex; flex-direction: column; min-height: 440px; }
.door:nth-child(2) { min-height: 520px; }
.door:nth-child(3) { min-height: 480px; }
.door .label { color: var(--night-muted); }
.door h3 { font: 400 clamp(32px, 2.8vw, 42px)/1.06 var(--serif); margin-top: auto; padding-top: 48px; }
.door p { color: var(--night-muted); margin-top: 16px; max-width: 380px; }
.door .cta { color: var(--night-text); }
.door:hover { background: #161616; }
.floor-note { display: flex; justify-content: space-between; padding: 14px 0 120px; color: var(--paper-text); }
.cta { display: inline-block; margin-top: 32px; font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 6px; align-self: flex-start; }
.note { display: none; font-size: 15px; color: var(--night-muted); margin-top: 12px; font-style: italic; font-family: var(--serif); }
.page .door-list { max-width: 460px; grid-template-columns: 1fr; }

/* plain pages */
.page { padding: 100px var(--gutter) 140px; max-width: 1100px; }
.page h1 { font: 400 clamp(46px, 6vw, 80px)/1.02 var(--serif); }
.page .lead { font: 400 22px/1.5 var(--serif); color: var(--paper-muted); max-width: 640px; margin-top: 24px; }
.page h2 { font: 400 32px/1.1 var(--serif); margin-top: 72px; }
.page ol { margin: 20px 0 0 22px; max-width: 640px; }
.page li { margin-top: 10px; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.btn { display: inline-block; margin-top: 40px; background: var(--paper-text); color: var(--paper); text-decoration: none; font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 16px 22px; }

/* footer */
.foot { background: var(--night); color: var(--night-muted); padding: 64px var(--gutter); display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.foot img { width: 160px; height: auto; margin-bottom: 18px; }
.foot p { max-width: 420px; font-size: 15px; }
.foot ul { list-style: none; display: flex; gap: 28px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }

@media (max-width: 1000px) {
  .surface, .floor { grid-template-columns: 1fr; }
  .towers, .roots { justify-self: start; max-width: 600px; }
  .surface .copy { padding-bottom: 32px; }
  .floor .copy { order: 2; padding-top: 24px; padding-bottom: 20px; }
  .roots { order: 1; }
  .door-list { grid-template-columns: 1fr; gap: 12px; }
  .door, .door:nth-child(2), .door:nth-child(3) { min-height: 0; }
  .door h3 { padding-top: 28px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .note { display: block; }
}
@media (max-width: 640px) {
  .nav { padding: 24px var(--gutter); }
  .nav .logo img { width: 130px; }
  .nav { gap: 12px; }
  .pill { padding: 8px 10px; letter-spacing: .12em; }
  .nav li:not(:last-child) { display: none; }
  .towers text { display: none; }
  .roots text { font-size: 24px; letter-spacing: 4px; }
  .doors { padding: 80px var(--gutter) 0; }
  .floor-note { padding-bottom: 80px; }
  .page { padding: 64px var(--gutter) 100px; }
}

/* article (versi baca) */
.article { max-width: 720px; margin: 0 auto; padding: 72px var(--gutter) 140px; box-sizing: content-box; }
.article .back { color: var(--paper-muted); text-decoration: none; }
.article .kicker { color: var(--paper-muted); margin-top: 56px; }
.article h1 { font: 400 clamp(42px, 6vw, 68px)/1.04 var(--serif); margin-top: 16px; }
.article .lead { font: italic 400 23px/1.45 var(--serif); color: var(--paper-muted); margin-top: 24px; }
.prose { font: 400 20px/1.7 var(--serif); margin-top: 56px; border-top: 1.5px solid var(--paper-text); padding-top: 24px; }
.prose p { margin-top: 1.1em; }
.prose h2 { font: 400 34px/1.15 var(--serif); margin-top: 2.2em; }
.prose h3 { font: 600 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-top: 2.4em; }
.prose strong { font-weight: 600; }
@media (max-width: 640px) { .prose { font-size: 18px; } .prose h2 { font-size: 28px; } }

/* Beranda: Mulai dari sini — two ways in, continuing from the floor */
.start { padding:0 var(--gutter) 120px; }
.start-bar { display:flex; justify-content:space-between; border-top:2px solid var(--paper-text); padding-top:16px; color:var(--paper-muted); }
.start-bar h2 { font:inherit; letter-spacing:inherit; color:var(--paper-text); }
.start-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:40px; margin-top:40px; align-items:end; }
.start-card .label { color:var(--paper-muted); margin-top:22px; }
.start-card h3 { font:400 clamp(34px, 3.4vw, 48px)/1.05 var(--serif); margin-top:8px; }
.start-lead { font:400 20px/1.4 var(--serif); color:var(--paper-muted); margin-top:8px; }
.start-act { display:flex; gap:24px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.start-act .btn { margin-top:0; }
.start-act .cta { margin-top:0; }
.start-art { display:block; position:relative; overflow:hidden; box-shadow:0 30px 60px -25px rgba(0,0,0,.45); }
.start-peta { aspect-ratio:16 / 9; }
.start-peta img { width:100%; height:100%; object-fit:cover; display:block; }
.start-app { aspect-ratio:16 / 11.6; background:#efe7d6; }
.start-app .lentera { position:absolute; left:-4%; top:-6%; width:70%; height:auto; mix-blend-mode:multiply; }
.device.mini { position:absolute; right:7%; top:7%; width:28%; border-radius:22px; background:#0b0b0b; padding:5px; box-shadow:0 20px 40px -18px rgba(0,0,0,.55); }
.device.mini img { width:100%; height:auto; display:block; border-radius:17px; }

/* Tiga Diri: Lentera in the hero, then each moment as its scene with its real screen */
.td-hero { background:var(--night); color:var(--night-text); display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:40px; padding:40px var(--gutter) 64px; }
.td-hero .label { color:var(--night-muted); }
.td-hero .lead { font:400 clamp(22px, 2.2vw, 30px)/1.3 var(--serif); color:#cfc8b8; margin-top:20px; }
.td-lentera { width:100%; max-width:600px; height:auto; aspect-ratio:1; object-fit:cover; justify-self:center; align-self:center; -webkit-mask:radial-gradient(circle closest-side, #000 70%, transparent 100%); mask:radial-gradient(circle closest-side, #000 70%, transparent 100%); }
.td-cta { display:flex; gap:28px; align-items:center; margin-top:40px; flex-wrap:wrap; }
.td-cta .btn { margin-top:0; }
.qr-wrap { display:flex; align-items:center; gap:14px; }
.qr-wrap .label { line-height:1.9; }
.qr { width:84px; height:84px; padding:8px; background:#efe7d6; box-sizing:content-box; }
.qr svg { width:100%; height:100%; display:block; }

.moments { background:#efe7d6; padding:0 var(--gutter); }
.moment { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; padding:64px 0; border-top:1.5px solid var(--paper-text); }
.moment.flip .moment-copy { order:2; }
.moment-copy h2 { font:400 clamp(30px, 3vw, 42px)/1.1 var(--serif); margin-top:10px; }
.moment-copy p:last-child { color:var(--paper-muted); margin-top:16px; max-width:460px; }
.m-malam { color:#c9822b; } .m-pagi { color:#3f66a8; } .m-minggu { color:var(--paper-muted); }
.moment-art { position:relative; aspect-ratio:1 / .95; max-width:620px; width:100%; }
.moment.flip .moment-art { justify-self:start; } .moment:not(.flip) .moment-art { justify-self:end; }
.moment-scene { position:absolute; left:0; top:6%; width:78%; height:auto; -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 90%, transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
.device.sm { position:absolute; right:0; top:0; width:36%; border-radius:30px; background:#0b0b0b; padding:7px; box-shadow:0 30px 60px -22px rgba(0,0,0,.55); }
.device.sm img { width:100%; height:auto; display:block; border-radius:23px; }

.steps-row { background:#efe7d6; padding:72px var(--gutter) 120px; }
.steps-row .label { color:var(--paper-muted); }
.steps-row ol { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:48px; margin-top:22px; border-top:1.5px solid var(--paper-text); padding-top:26px; }
.steps-row span { display:block; font:400 44px/1 var(--serif); }
.steps-row b { display:block; font:400 24px/1.25 var(--serif); margin-top:10px; }
.steps-row em { display:block; font-style:normal; color:var(--paper-muted); font-size:15px; margin-top:6px; }

/* Peta: one cover, one title, two actions */
.cover { position: relative; min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); display: flex; align-items: flex-end; background: #0a0908; overflow: hidden; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,9,8,.98) 0%, rgba(10,9,8,.96) 42%, rgba(10,9,8,.3) 62%, transparent 80%); }
.cover-copy { position: relative; z-index: 1; padding: 0 var(--gutter) 72px; color: var(--night-text); }
.cover-copy .label { color: #b9b2a3; }
.cover-copy h1 { margin-top: 14px; }
.actions { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.actions .btn { margin-top: 0; }
.btn--light { background: var(--paper); color: var(--night); }
.btn--line { background: transparent; color: var(--night-text); border: 1.5px solid #8d8678; }

@media (max-width: 760px) {
  .td-hero { grid-template-columns: 1fr; padding-bottom: 40px; }
  .td-lentera { max-width: 340px; }
  .qr-wrap { display: none; }
  .moment { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
  .moment.flip .moment-copy { order: 0; }
  .moment .moment-art, .moment.flip .moment-art { justify-self: stretch; }
  .steps-row ol { grid-template-columns: 1fr; gap: 28px; }
  .cover { min-height: calc(100svh - 80px); }
  .cover-img { object-position: 50% 20%; }
}

@media (max-width: 360px) { .nav .logo img { width: 112px; } .pill { font-size: 10px; letter-spacing: .08em; } }

@media (max-width: 1000px) { .start-grid { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 640px) { .start { padding-bottom: 80px; } .start-bar span { display: none; } }