/* ————————————————————————————————————————————————————————————————
   THE SIMPLE AS SACRED · the doorway page

   The cover he made is the whole design brief: a near-black field, one
   enormous heart drawn in light, a magenta rim on one side and a warm
   gold rim on the other, and two lines of type — white, then pink. So
   the page keeps the field flat and black and lets ALL of the colour
   come from the drawn heart behind it (see sacred.js). No washes, no
   drifting blobs: one figure, made of light, breathing.

   Every gate is a chamfered octagon. Nothing here is a pill.
   No text sits under 0.9 opacity; hierarchy is size and weight.
   ———————————————————————————————————————————————————————————————— */
:root {
  --void: #06030e;
  --ink: #f7f5ef;
  --rose: 255, 122, 217;
  --orchid: 226, 164, 255;
  --violet: 160, 124, 255;
  --gold: 255, 216, 166;
  --rim: var(--rose);
  --cut: 13px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --measure: 720px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  position: relative;
  min-height: 100svh;
  background: var(--void);
  color: var(--ink);
  font-family: Outfit, Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; }

/* ── THE LIGHT ── */
#field {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── THE FRAME ── */
.top {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.top a { color: var(--ink); text-decoration: none; }
.top .home { font-family: Unbounded, Outfit, sans-serif; }
.top .crumb { color: rgb(var(--orchid)); }
.top .crumb::before { content: '/'; margin-right: 10px; opacity: .55; color: var(--ink); }
.top .app {
  margin-left: auto; padding: 9px 13px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: rgba(255, 255, 255, .1);
}
.top .app { white-space: nowrap; }
.top .app:hover, .top a:focus-visible { background: rgba(var(--rose), .3); }
@media (max-width: 420px) {
  .top { gap: 8px; padding-left: 16px; padding-right: 16px; font-size: 10px; letter-spacing: .16em; }
  .top .app { padding: 8px 10px; }
  .top .crumb::before { margin-right: 8px; }
}
.top a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.room {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ── THE HERO ── */
.hero { padding: 26px 0 0; text-align: center; }
.cover {
  display: block; width: min(100%, 420px); margin: 0 auto 30px;
  border-radius: 26px;
  filter: drop-shadow(0 26px 70px rgba(var(--violet), .42)) drop-shadow(0 0 120px rgba(var(--rose), .22));
}
.kicker {
  margin: 0 0 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--orchid));
}
h1 {
  margin: 0 0 16px;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: clamp(38px, 11.4vw, 74px); font-weight: 800; line-height: .98; letter-spacing: -.03em;
}
.heart {
  margin: 0 0 26px;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: clamp(21px, 6.1vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.01em;
  color: rgb(var(--orchid));
  text-shadow: 0 0 44px rgba(var(--rose), .45);
}
.lead {
  margin: 0 auto 18px; max-width: 30em;
  font-size: 17.5px; line-height: 1.62;
}
.by {
  margin: 0 0 30px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  opacity: .92;
}

/* ── THE DOOR ── */
.door { margin: 0 0 22px; }
.addr {
  margin: 13px 0 0;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: rgb(var(--orchid)); word-break: break-word;
}
.nums {
  margin: 0; min-height: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.nums b { font-size: 15px; font-weight: 800; color: rgb(var(--orchid)); font-variant-numeric: tabular-nums; }
.nums span { display: inline-flex; align-items: baseline; gap: 7px; }
.nums i { font-style: normal; color: rgb(var(--violet)); }
/* two numbers, one line where there is room and two where there is not —
   a separator stranded at the end of a wrapped line reads as a mistake */
@media (max-width: 560px) {
  .nums { flex-direction: column; gap: 6px; }
  .nums i { display: none; }
}

.scroll {
  display: block; width: 26px; height: 46px; margin: 36px auto 0;
  border-radius: 14px; box-shadow: inset 0 0 0 1.6px rgba(var(--orchid), .5);
}
.scroll span {
  display: block; width: 4px; height: 8px; margin: 9px auto 0;
  border-radius: 2px; background: rgb(var(--orchid));
  animation: fall 2.4s var(--ease) infinite;
}
@keyframes fall { 0%, 100% { transform: translateY(0); opacity: 1 } 55% { transform: translateY(17px); opacity: .2 } }
.scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ── THE SECTIONS ── */
section { padding: 86px 0 0; }
.sec {
  margin: 0 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--orchid));
}
h2 {
  margin: 0 0 26px;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: clamp(28px, 8vw, 46px); font-weight: 800; line-height: 1.02; letter-spacing: -.028em;
  white-space: pre-line;
}

/* ── THE READING ── */
.player { display: flex; align-items: center; gap: 16px; }
.mark {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 260ms var(--ease);
}
.mark:active { transform: scale(.94); }
.mark:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.mark svg { display: block; width: 100%; height: 100%; }
.mark .ring { fill: rgba(8, 4, 18, .7); stroke: rgba(var(--orchid), .45); stroke-width: 2.4; }
.mark .prog {
  fill: none; stroke: rgb(var(--rose)); stroke-width: 2.8; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transform: rotate(-90deg); transform-origin: 32px 32px;
  filter: drop-shadow(0 0 7px rgba(var(--rose), .9));
}
.mark .play, .mark .pause rect { fill: var(--ink); }
.mark .pause { display: none; }
body.on .mark .play { display: none; }
body.on .mark .pause { display: block; }

.wavewrap { flex: 1 1 auto; min-width: 0; }
#wave { display: block; width: 100%; height: 66px; cursor: pointer; touch-action: none; }
#wave:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.clock {
  display: flex; justify-content: space-between; margin: 6px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.clock em { font-style: normal; opacity: .92; }

.acts { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; }
.fine { margin: 16px 0 0; font-size: 13.5px; opacity: .92; }

/* ── WHAT IS INSIDE ── */
.partlist, .movelist, .princlist, .three { list-style: none; margin: 0; padding: 0; }
.partlist li {
  padding: 18px 0;
  box-shadow: inset 0 1px 0 rgba(var(--orchid), .22);
}
.partlist li:first-child { box-shadow: none; }
.partlist b {
  display: block; font-family: Unbounded, Outfit, sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
}
.partlist i {
  display: block; margin: 0 0 6px; font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--orchid));
}
.partlist span { display: block; margin: 6px 0 0; font-size: 15.5px; opacity: .92; }

/* ── THE MOVEMENTS ── */
.movelist li { padding: 0 0 46px; }
.movelist .n {
  display: block; margin: 0 0 8px;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .2em;
  color: rgb(var(--rose));
}
.movelist b {
  display: block;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: clamp(22px, 5.6vw, 30px); font-weight: 700; line-height: 1.14; letter-spacing: -.02em;
}
.movelist i {
  display: block; margin: 8px 0 0; font-style: normal;
  font-size: 16.5px; color: rgb(var(--orchid)); opacity: .96;
}
.movelist q {
  display: block; margin: 16px 0 0; padding: 0 0 0 16px; quotes: none;
  box-shadow: inset 2px 0 0 rgba(var(--rose), .75);
  font-size: 16px; line-height: 1.52;
}

/* ── THE PRINCIPLES ── */
.princlist { display: grid; gap: 12px; }
.princlist li {
  position: relative; padding: 20px 20px 20px 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(158deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
}
.princlist .n {
  display: block; margin: 0 0 7px;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: rgb(var(--orchid));
}
.princlist b {
  display: block; font-family: Unbounded, Outfit, sans-serif;
  font-size: 17.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.012em;
}
.princlist span { display: block; margin: 9px 0 0; font-size: 15.5px; opacity: .93; }
.princlist em {
  display: block; margin: 10px 0 0; font-style: normal;
  font-size: 14px; font-weight: 600; color: rgb(var(--orchid));
}

/* ── TRUTH · DREAM · MOVE ── */
.praclead { margin: 0 0 30px; font-size: 18px; line-height: 1.6; }
.three { display: grid; gap: 12px; }
.three li {
  padding: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(158deg, rgba(var(--rose), .2), rgba(var(--violet), .1));
}
.three i {
  display: block; font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--orchid));
}
.three b {
  display: block; margin: 6px 0 0;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
}
.three span { display: block; margin: 9px 0 0; font-size: 15.5px; opacity: .94; }
.pracend {
  margin: 28px 0 0;
  font-family: Unbounded, Outfit, sans-serif;
  font-size: clamp(18px, 4.6vw, 24px); font-weight: 600; line-height: 1.32; letter-spacing: -.012em;
  color: rgb(var(--orchid));
}

/* ── THE CLOSE ── */
.close { text-align: center; padding-top: 104px; }
.closesay { margin: 0 auto 34px; max-width: 32em; font-size: 17.5px; }
.foot { padding: 84px 0 0; text-align: center; }
.foot .acts { justify-content: center; }
.footby {
  margin: 0 0 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .92;
}

/* ── THE ENERGY GATE — the only button shape here ── */
.gate {
  position: relative; display: inline-flex; border: 0; padding: 0; background: none;
  cursor: pointer; text-decoration: none; color: var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 0 14px rgba(var(--rim), .34));
  transition: transform 280ms var(--ease), filter 280ms;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.gate:hover, .gate:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 0 26px rgba(var(--rim), .66)); }
.gate:active { transform: scale(.975); }
.gate:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.gate::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(142deg, rgba(var(--rose), .95), rgba(var(--violet), .7) 52%, rgba(var(--gold), .65));
}
.gate-in {
  position: relative; z-index: 1; margin: 1.6px; padding: 12px 17px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
  background: linear-gradient(165deg, rgba(10, 5, 24, .97), rgba(4, 2, 12, .99));
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink);
}
.gate-in::before {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 160%; z-index: -1;
  background: radial-gradient(62% 42% at 50% 100%, rgba(var(--rim), .55), transparent 72%);
  transform: translateY(74%); transition: transform 820ms var(--ease);
}
.gate:hover .gate-in::before, .gate:focus-visible .gate-in::before { transform: translateY(14%); }
.gate.sm .gate-in { padding: 11px 15px; }
.gate[disabled] { opacity: .55; cursor: default; }

/* the big one: the whole page leans on it */
.gate.go { width: 100%; max-width: 420px; --cut: 18px; }
.gate.go .gate-in {
  padding: 21px 24px; gap: 7px;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
}
.gate.go b {
  font-family: Unbounded, Outfit, sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: none;
}
.gate.go i {
  font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: none; color: rgb(var(--orchid)); white-space: normal; line-height: 1.34;
}
.gate.go::before {
  background: linear-gradient(142deg, rgb(var(--rose)), rgb(var(--violet)) 48%, rgb(var(--gold)));
  animation: rim 9s linear infinite;
}
@keyframes rim { 0%, 100% { filter: hue-rotate(0deg) } 50% { filter: hue-rotate(-16deg) } }

/* ── THE WORD ── */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 9;
  transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  padding: 11px 17px; border-radius: 13px;
  background: rgba(10, 5, 24, .96); box-shadow: 0 0 0 1px rgba(var(--orchid), .4);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  transition: transform 340ms var(--ease), opacity 340ms;
}
.toast.shown { transform: translate(-50%, 0); opacity: 1; }

/* ── WHAT RISES, RISES ONCE ── */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 760ms var(--ease), transform 760ms var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ── ROOMS WITH MORE ROOM ── */
@media (min-width: 760px) {
  body { font-size: 18px; }
  .room { padding: 0 32px 90px; }
  .hero { padding-top: 40px; }
  .cover { width: min(100%, 460px); }
  section { padding-top: 116px; }
  .princlist { grid-template-columns: 1fr 1fr; }
  .three { grid-template-columns: 1fr 1fr 1fr; }
  #wave { height: 82px; }
  .mark { width: 76px; height: 76px; }
}
@media (min-width: 1100px) {
  :root { --measure: 880px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .scroll span { animation: none; }
  .gate, .gate-in::before, .toast { transition: none; }
  .gate.go::before { animation: none; }
}