/*
  NOLANKA / v1 — a quiet, self-contained holding page.
  No external assets, CDNs, tracking or build step.
*/
:root {
  --base: #0d100d;
  --type: #e7eadf;
  --quiet: #858d80;
  --quiet-2: #536051;
  --acid: #d9fc89;
  --rule: rgba(217, 232, 209, 0.14);
  --page-pad: clamp(24px, 4.15vw, 80px);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--base); }
body {
  min-width: 320px; margin: 0; min-height: 100svh;
  color: var(--type); background: var(--base);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { color: #101510; background: var(--acid); }
a { color: inherit; }
button { font: inherit; }
.page-grain {
  position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E");
}
.page-shell {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: 100svh; padding: 0 var(--page-pad);
  max-width: 1920px; margin: 0 auto;
}
.page-shell::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(ellipse 40% 55% at 75% 47%, rgba(152, 190, 111, .055), transparent 70%);
  pointer-events: none;
}
.site-header {
  height: 114px; flex: 0 0 114px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 28px; font-weight: 760; letter-spacing: -.07em; line-height: 1; }
.brand-mark { width: 34px; height: 34px; color: var(--acid); }
.brand-period { color: var(--acid); }
.header-status, .eyebrow, .art-index, .site-footer {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .145em;
}
.header-status { display:flex; align-items: center; gap: 12px; color: var(--type); white-space: nowrap; }
.status-light { position: relative; display:block; width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 14px rgba(217,252,137,.75); }
.status-light::before { content: ''; position:absolute; inset:-7px; border:1px solid rgba(217,252,137,.30); border-radius:50%; animation:status-pulse 4s ease-in-out infinite; }
@keyframes status-pulse { 0%, 100% { transform:scale(.7); opacity:.28; } 50% { transform:scale(1.14);opacity:.7; } }

.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 53%); align-items: center; min-height: 660px; }
.hero-content { z-index: 2; padding: 45px 0 78px; }
.eyebrow { display:flex; align-items:center; gap: 13px; color: var(--quiet); white-space: nowrap; }
.eyebrow-line { width: 24px; height:1px; background: var(--acid); }
.eyebrow-number { color:var(--quiet-2); }
h1 { display:flex; flex-direction:column; align-items:flex-start; margin: 50px 0 0; font-weight: 800; letter-spacing: -.092em; }
.title-first { font-size: clamp(114px, 14.7vw, 259px); line-height: .78; letter-spacing: -.114em; transform:translateX(-.035em); }
.title-second { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: clamp(137px, 15.5vw, 282px); line-height: 1; letter-spacing: -.112em; margin-top: -.045em; transform:translateX(.065em); }
.title-dot { color: var(--acid); font-style: normal; display:inline-block; transform:translateX(-.06em); }
.hero-bottom { display:flex; align-items: flex-start; gap: 35px; margin: 28px 0 0 8px; }
.hero-squiggle { color: var(--acid); margin-top: 7px; flex: 0 0 auto; }
.hero-bottom p { color: #9fa99a; margin:0; font-size: clamp(15px,1.24vw,19px); line-height: 1.48; font-weight: 350; letter-spacing:-.012em; }

.art-panel { position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; justify-content:center; padding:24px 0; width:min(100%, calc(100svh - 238px)); max-width:815px; justify-self:end; }
.art-index { color:var(--quiet); display:flex; justify-content:space-between; align-items:center; margin: 0 6.1%; position:relative; z-index: 2; }
.art-index-top { margin-bottom:-20px; }
.art-index-bottom { margin-top:-28px; }
.art-index-bottom span:last-child { font-size: 20px; font-weight:400; color: var(--acid); line-height: 1; }
.artwork { display:grid; place-items:center; aspect-ratio:1; position:relative; width:100%; }
.orbit-guide { position:absolute; pointer-events:none; border: 1px solid rgba(225,238,210,.09); border-radius:50%; }
.orbit-guide-one { inset: 11%; }
.orbit-guide-two { inset: 19%; border-style:dashed; border-color:rgba(225,238,210,.05); animation: guide-spin 180s linear infinite; }
.artwork::before { content:'';position:absolute;inset:13%;background:radial-gradient(circle at 53% 48%,rgba(142,187,89,.095),transparent 62%);border-radius:50%; }
.artwork-float { position:relative; z-index:1; width:106%; pointer-events:none; animation:drift 10s ease-in-out infinite; }
.artwork-button {
  position:relative; display:block; padding:0; width:100%; border:0; background:none; color:inherit;
  cursor:crosshair; pointer-events:auto; transform: translate3d(var(--move-x,0px),var(--move-y,0px),0) rotate(-4deg);
  transition: transform .6s cubic-bezier(.16,1,.3,1),filter .7s ease;
  border-radius:50%;
}
.artwork-button img { display:block; width:100%;height:auto;user-select:none; }
.artwork-button:hover { filter:brightness(1.13); }
.artwork-button:focus-visible { outline:1px solid var(--acid);outline-offset:-8px; }
.artwork-button:active { filter:brightness(1.35); }
.artwork-button.is-excited { filter:brightness(1.5) drop-shadow(0 0 28px rgba(217,252,137,.16)); }
.artwork-tick { position:absolute;color:rgba(225,236,210,.38);font-size:17px;font-weight:200;line-height:1; pointer-events:none; }
.artwork-tick-a { top:28%;left:6%; }.artwork-tick-b { bottom:24%;right:7%; }
.secret { position:absolute;bottom:13%;left:0;width:100%;text-align:center;margin:0;color:var(--acid);font-size:12px;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translateY(9px);transition:opacity .4s,transform .4s; }
.secret.is-visible { opacity:1;transform:translateY(0); }
@keyframes drift { 0%,100% { transform:translateY(0) rotate(0deg) } 50% { transform:translateY(-14px) rotate(2deg) } }
@keyframes guide-spin { to {transform:rotate(360deg);} }

.site-footer { border-top:1px solid var(--rule); height:93px;flex:0 0 93px;display:flex;align-items:center;justify-content:space-between;color:var(--quiet); gap:30px; }
.footer-copyright { white-space:nowrap; }
.footer-middle { display:flex;align-items:center;gap:16px;white-space:nowrap;color:var(--quiet-2); }
.footer-line { width:40px;height:1px;background:var(--rule); }
.footer-right { white-space:nowrap;display:flex;align-items:center;gap:14px; }
.footer-right span { font-size:19px;line-height:1;color:var(--acid);font-weight:400; }

@media (min-width:1600px) {
 .hero { grid-template-columns: 48% 52%; }
 .art-panel { max-width:820px; }
}
@media (max-width:1100px) {
 .hero { grid-template-columns: 50% 50%; min-height: 560px; }
 .title-first { font-size:clamp(95px,14.4vw,170px); }
 .title-second { font-size:clamp(117px,15.3vw,180px); }
 .hero-bottom { margin-top:30px; }
 .art-index { font-size:9px; }
 .footer-middle { display:none; }
}
@media (min-width:701px) and (max-height:820px) {
 .site-header { height:82px;flex-basis:82px; }
 .site-footer { height:69px;flex-basis:69px; }
 .hero { min-height:500px; }
 .hero-content { padding:22px 0 24px; }
 h1 { margin-top:30px; }
 .title-first { font-size:clamp(104px,11vw,178px); }
 .title-second { font-size:clamp(122px,11.5vw,195px); }
 .hero-bottom { margin-top:20px; }
 .art-panel { width:min(100%, calc(100svh - 188px)); }
}
@media (max-width:700px) {
 :root { --page-pad: 24px; }
 .site-header { height:85px;flex-basis:85px; }
 .brand { font-size:25px;gap:9px; }
 .brand-mark { width:29px;height:29px; }
 .header-status { gap:10px;font-size:9px;letter-spacing:.085em; }
 .hero { grid-template-columns:1fr;min-height:0;align-content:start; }
 .hero-content { padding:66px 0 0; }
 .eyebrow { font-size:10px;letter-spacing:.12em; }
 h1 { margin-top:42px; }
 .title-first { font-size:clamp(126px,25vw,190px); }
 .title-second { font-size:clamp(149px,27vw,206px); }
 .hero-bottom { margin:12px 0 0 4px;gap:24px; }
 .hero-bottom p { font-size:16px; }
 .hero-squiggle svg { width:42px; }
 .art-panel { margin: 20px auto 32px; padding: 12px 0;width:100%;max-width:560px; }
 .art-index { margin-left:7%;margin-right:7%;font-size:9px; }
 .art-index-top { margin-bottom:-18px; }
 .art-index-bottom { margin-top:-20px; }
 .artwork { width:calc(100% + 32px);margin-left:-16px; }
 .secret { bottom: 11%;font-size:10px; }
 .site-footer { height:auto;flex-basis:auto; min-height:84px;padding:21px 0; font-size:10px; }
 .footer-right { max-width:44%;text-align:right;white-space:normal; gap:8px; }
 .footer-right span { flex:0 0 auto; }
}
@media(max-width:380px) {
 .title-first {font-size:115px;}.title-second{font-size:140px;}
 .hero-content{padding-top:48px;}
 .footer-right{font-size:9px;}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;}
 .artwork-button { transition:none; }
}