/* How to Become a Divine Channel: the article (training.theibogasource.com/how-to-become-a-divine-channel).
   Two houses in one page. It opens in The Iboga Source night (the header, the dark earth, the stars, the
   pavilion in the art) and dawns into the Heaven on Earth marble (ivory, ink, honey gold, round arches).
   Its signature is the channel: a line of light down the reading column that fills as you read, with a
   round seal for each key that lights up when you reach it. Loads after transcend.css. */
:root{
  --ivory:#fffaf0;
  --ivory-2:#f7eedc;
  --ink:#1b2332;
  --ink-2:#3a4253;
  --honey:#e3a53a;
  --gold-text:#9a5600;
  --rule:rgba(154,86,0,.18);
  --read:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --col:680px;
  --round-arch:50% 50% 0 0/40% 40% 0 0;
}

/* ---------- the night: the hero ---------- */
.dc-hero{position:relative;overflow:hidden;isolation:isolate;
  padding-top:calc(env(safe-area-inset-top, 0px) + 122px);padding-bottom:clamp(36px, 6vw, 80px);
  background:radial-gradient(90% 70% at 78% 108%, rgba(80,64,110,.55), rgba(14,11,8,0) 62%),var(--earth)}
.dc-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.75;
  background-image:
    radial-gradient(1.3px 1.3px at 18px 26px, rgba(255,246,226,.9), transparent 70%),
    radial-gradient(1px 1px at 92px 70px, rgba(255,246,226,.7), transparent 70%),
    radial-gradient(1.6px 1.6px at 160px 18px, rgba(255,236,200,.85), transparent 70%),
    radial-gradient(1px 1px at 210px 120px, rgba(255,246,226,.6), transparent 70%),
    radial-gradient(1.2px 1.2px at 48px 150px, rgba(255,246,226,.7), transparent 70%),
    radial-gradient(1px 1px at 130px 176px, rgba(255,236,200,.55), transparent 70%);
  background-size:240px 200px;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.dc-hero-in{display:grid;grid-template-columns:1fr;gap:clamp(30px, 4vw, 64px);align-items:center}
.dc-hero-copy{max-width:620px}
.dc-hero-copy > *{animation:dc-rise .9s cubic-bezier(.2,.7,.2,1) both}
.dc-hero-copy > :nth-child(2){animation-delay:.08s}
.dc-hero-copy > :nth-child(3){animation-delay:.16s}
.dc-hero-copy > :nth-child(4){animation-delay:.26s}
.dc-hero-copy > :nth-child(5){animation-delay:.36s}
@keyframes dc-rise{from{opacity:0;transform:translateY(14px)}}
.crumbs ol{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.4em .55em;font:500 .82rem/1.4 var(--ui);color:var(--dust)}
.crumbs li + li::before{content:"›";margin-right:.55em;color:var(--sand-lo)}
.crumbs a{color:var(--dust);text-decoration:none}
.crumbs a:hover{color:var(--sand-hi)}
.dc-hero h1{font:600 clamp(2.5rem, 5.6vw, 4.5rem)/1.05 var(--display);letter-spacing:.01em;color:var(--bone);text-wrap:balance}
.dc-lead{margin-top:1.1rem;font:italic 500 clamp(1.4rem, 2.6vw, 2rem)/1.3 var(--serif);color:var(--sand-hi)}
.byline{margin-top:2.1rem;display:flex;align-items:center;gap:14px;font:400 .92rem/1.45 var(--ui);color:var(--dust)}
.byline b{color:var(--bone);font-weight:600}
.byline i{font-style:italic}
.byline-face{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--sand-lo),0 0 26px rgba(217,173,112,.28)}
.dc-hero-art{position:relative;margin:0;justify-self:center;width:min(100%, 440px)}
.dc-hero-art img{width:100%;height:auto;aspect-ratio:1800/2249;object-fit:cover;border-radius:var(--round-arch);
  box-shadow:0 46px 90px -46px rgba(0,0,0,.95),0 0 80px -20px rgba(227,165,58,.25)}
.dc-hero-art::after{content:"";position:absolute;inset:-11px -11px 0;border:1px solid rgba(227,165,58,.5);border-bottom:0;border-radius:var(--round-arch);pointer-events:none}
@media (min-width:960px){
  .dc-hero-in{grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);min-height:min(84vh, 880px)}
  .dc-hero-art{width:min(100%, 520px)}
}

/* ---------- the dawn: night into the marble morning ---------- */
.dawn{height:clamp(130px, 17vw, 250px);
  background:radial-gradient(70% 130% at 50% 100%, rgba(255,214,150,.6), rgba(255,214,150,0) 70%),
    linear-gradient(180deg,var(--earth) 0%,#151a2c 22%,#3d3c5a 44%,#b48f78 68%,#f1dcba 86%,var(--ivory) 100%)}

/* ---------- the marble morning: the article body ---------- */
.dc-body{position:relative;isolation:isolate;background:var(--ivory);color:var(--ink);font:400 1.125rem/1.78 var(--read)}
.dc-body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;background-size:900px 900px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 140C160 120 230 260 420 230S700 90 940 160' stroke='%239a5600' stroke-opacity='.09' stroke-width='1.2'/%3E%3Cpath d='M-20 520C120 470 260 600 470 560S760 420 940 470' stroke='%231b2332' stroke-opacity='.045' stroke-width='1'/%3E%3Cpath d='M120 -20C160 160 90 300 210 470S260 760 180 940' stroke='%239a5600' stroke-opacity='.06' stroke-width='1'/%3E%3Cpath d='M640 -20C600 200 700 330 640 520S560 780 660 940' stroke='%231b2332' stroke-opacity='.035' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E")}
.dc-body a{color:var(--gold-text);text-decoration-thickness:1px;text-underline-offset:3px}
.dc-body a:hover{color:#7a4300}
.dc-body :focus-visible{outline-color:var(--gold-text)}
.dc-body p + p{margin-top:1.05em}
.dc-body h2{font:600 clamp(2rem, 3.6vw, 2.8rem)/1.12 var(--serif);letter-spacing:0;color:var(--ink);text-wrap:balance}
.dc-body h3{font-family:var(--read);color:var(--ink)}
.dc-body .land{font:italic 500 1.42em/1.35 var(--serif);color:var(--gold-text)}
.dc-col{position:relative;width:100%;max-width:calc(var(--col) + var(--gut-l) + var(--gut-r));margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.dc-col > :first-child{padding-top:clamp(20px, 3vw, 40px)}
.dc-first{font:italic 500 clamp(1.5rem, 2.6vw, 1.95rem)/1.35 var(--serif);color:var(--ink)}
.gold-line{color:var(--gold-text);font-weight:600}

/* the five keys at a glance */
.glance{margin-top:2.2em;padding:clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);border-radius:22px;
  background:linear-gradient(180deg,#fff,rgba(255,250,240,.7));box-shadow:0 0 0 1px var(--rule),0 26px 50px -38px rgba(154,86,0,.5)}
.glance-title{font:500 .78rem/1.4 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text);margin-bottom:.9em}
.glance ol{margin:0;padding:0;list-style:none;counter-reset:k;display:grid;gap:.55em}
.glance li{counter-increment:k;display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;line-height:1.5}
.glance li::before{content:counter(k, upper-roman);font:600 .95rem/1 var(--display);color:var(--honey)}
.glance a{color:var(--ink);text-decoration:none;font-weight:600}
.glance a:hover{color:var(--gold-text);text-decoration:underline}

/* each key, with its round seal (an arch inside a circle) */
.key{position:relative;padding-top:clamp(64px, 8vw, 104px)}
.key-n{font:500 .78rem/1.4 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-text)}
.dc-body .key-n + h2{margin-top:.35em}
.key h2{margin-bottom:.7em}
.seal{position:relative;width:58px;height:58px;margin:0 0 18px;border-radius:50%;display:grid;place-items:center;
  font:600 .98rem/1 var(--display);color:var(--gold-text);
  background:radial-gradient(circle at 50% 38%,#fff,var(--ivory) 72%);
  box-shadow:0 0 0 1px rgba(154,86,0,.34),inset 0 0 0 5px var(--ivory),inset 0 0 0 6px rgba(154,86,0,.2);
  transition:background .9s ease,box-shadow .9s ease,color .9s ease}
.seal::before{content:"";position:absolute;left:50%;top:13px;width:24px;height:30px;margin-left:-12px;border:1px solid rgba(154,86,0,.28);border-bottom:0;border-radius:12px 12px 0 0}
.seal span{position:relative;top:3px}
.key.lit .seal{color:#6b3b00;background:radial-gradient(circle at 50% 38%,#fff6df,#f4d18a 78%);
  box-shadow:0 0 0 1px var(--honey),inset 0 0 0 5px #fff3d6,inset 0 0 0 6px rgba(154,86,0,.34),0 0 32px rgba(227,165,58,.6)}
.story{margin-top:1.6em;padding:clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 30px);border-radius:20px;
  background:linear-gradient(135deg,#fffdf7,#fbf1dc);box-shadow:0 0 0 1px var(--rule)}
.story-laugh{font:italic 600 1.15em/1.3 var(--serif);color:var(--gold-text)}
.story + p{margin-top:1.3em}
/* a piece of The Iboga Source night inside the morning: the training, right where it fits */
.nudge{margin-top:2em;padding:clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 30px);border-radius:20px;display:grid;gap:.85em;
  background:var(--bark);color:var(--bone-2);box-shadow:0 0 0 1px var(--line),0 30px 60px -44px rgba(14,11,8,.9)}
.nudge b{color:var(--sand-hi);font-weight:600}
.dc-body .nudge-link{justify-self:start;color:var(--sand-hi);font-weight:700;text-decoration:none}
.dc-body .nudge-link:hover{color:var(--gold-hi);text-decoration:underline}

/* the channel: a line of light down the reading column, the seals sit on it */
@media (min-width:1100px){
  .dc-col.lined::before,.dc-col.lined::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut-l) - 76px);width:2px;border-radius:2px;pointer-events:none}
  .dc-col.lined::before{background:linear-gradient(180deg,rgba(154,86,0,0),var(--rule) 5%,var(--rule) 95%,rgba(154,86,0,0))}
  .dc-col.lined::after{background:linear-gradient(180deg,rgba(255,247,227,0),#fff7e3 4%,var(--honey));transform-origin:top;transform:scaleY(var(--p, 1));
    box-shadow:0 0 14px rgba(227,165,58,.75)}
  .dc-col .key .seal{position:absolute;left:-104px;top:calc(clamp(64px, 8vw, 104px) - 6px);margin:0;z-index:1}
}

/* ---------- the prayer ---------- */
.prayer-key{padding-top:clamp(64px, 8vw, 104px)}
.prayer-band{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;text-align:center;
  min-height:clamp(640px, 94vh, 1000px);padding:clamp(54px, 7vw, 96px) var(--gut-r) clamp(280px, 34vw, 440px) var(--gut-l)}
.prayer-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.prayer-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ivory) 0%,rgba(255,250,240,.9) 16%,rgba(255,250,240,.5) 44%,rgba(255,250,240,0) 64%)}
.prayer-in{max-width:780px}
.prayer-in .seal{margin:0 auto 16px}
.prayer-intro{margin-top:.6em;color:var(--ink-2)}
.prayer-words{margin:clamp(22px, 3vw, 38px) 0 0;font:italic 500 clamp(1.9rem, 4.4vw, 3.4rem)/1.2 var(--serif);color:var(--ink);text-wrap:balance}
.dc-body .prayer-words p + p{margin-top:.25em}
.prayer-words.dimmable .w{color:rgba(27,35,50,.24);transition:color .7s ease,text-shadow .7s ease}
.prayer-words.dimmable .w.lit{color:var(--ink);text-shadow:0 0 26px rgba(255,236,190,.95)}
.prayer-words.dimmable .w.gold.lit{color:var(--gold-text)}
.living{padding-top:clamp(64px, 8vw, 104px)}
.living h2{margin-bottom:.7em}

/* ---------- two houses, two doors ---------- */
.doors{margin-top:clamp(70px, 9vw, 120px);padding-block:clamp(70px, 9vw, 120px);background:linear-gradient(180deg,rgba(247,238,220,0),var(--ivory-2) 22%,var(--ivory-2) 78%,rgba(247,238,220,0))}
.doors-in{max-width:1180px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.doors h2{text-align:center;margin-bottom:clamp(30px, 4vw, 54px)}
.door-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px, 3vw, 34px)}
.door{display:flex;flex-direction:column;gap:.85em;border-radius:28px;padding:clamp(16px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px) clamp(26px, 3vw, 36px)}
.dc-body .door p + p{margin-top:0}
.door-ceremony{background:var(--bark);color:var(--bone-2);box-shadow:0 0 0 1px var(--line),0 44px 80px -50px rgba(14,11,8,.95)}
.door-heaven{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--rule),0 44px 80px -50px rgba(154,86,0,.55)}
.door-art{margin:0 0 .4em;aspect-ratio:16/10;overflow:hidden}
.door-art img{width:100%;height:100%;object-fit:cover}
.door-ceremony .door-art{-webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat}
.door-ceremony .door-art img{object-position:50% 58%}
.door-heaven .door-art{border-radius:50% 50% 14px 14px/42% 42% 14px 14px}
.door-heaven .door-art img{object-position:42% 38%}
.door-eyebrow{font:500 .76rem/1.4 var(--display);letter-spacing:.24em;text-transform:uppercase}
.door-ceremony .door-eyebrow{color:var(--sand)}
.door-heaven .door-eyebrow{color:var(--gold-text)}
.dc-body .door h3{font:600 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--serif)}
.dc-body .door-ceremony h3{color:var(--bone)}
.door-links{margin-top:auto;padding-top:.7em;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.dc-body .door-btn{min-height:50px;padding:.72rem 1.5rem;font-size:.95rem;color:#000;text-decoration:none}
.door-heaven .door-btn{background:linear-gradient(180deg,#f6cf7f,var(--honey));color:#2a1700;box-shadow:0 10px 30px -14px rgba(154,86,0,.7)}
.dc-body .door-more{color:var(--sand-hi);font-weight:600}
.dc-body .door-more:hover{color:var(--gold-hi)}
@media (min-width:860px){.door-grid{grid-template-columns:1fr 1fr}}

/* ---------- questions, the close, the author ---------- */
.faq-a{padding-top:clamp(20px, 3vw, 40px)}
.faq-a h2{margin-bottom:.2em}
.dc-body .faq-a h3{margin-top:1.5em;font-size:1.22rem;font-weight:700;line-height:1.35}
.dc-body .faq-a h3 + p{margin-top:.45em}
.dc-close{margin-top:clamp(56px, 7vw, 90px)}
.truth{font:italic 500 clamp(1.6rem, 3vw, 2.2rem)/1.3 var(--serif);color:var(--ink)}
.dc-body .dc-close .sig{color:var(--gold-text)}
.dc-body .dc-close .sig::before{background:var(--gold-text)}
.author{margin:clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 130px);display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;
  padding:20px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.author p{font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.author b{color:var(--ink)}

@media (max-width:640px){
  .dc-body{font-size:1.06rem}
  .dc-hero{padding-top:calc(env(safe-area-inset-top, 0px) + 104px)}
  .byline{font-size:.86rem}
  .glance li{grid-template-columns:2.1em 1fr}
  .author{grid-template-columns:56px 1fr;padding:16px 18px}
  .author img{width:56px;height:56px}
}
@media (prefers-reduced-motion: reduce){
  .dc-hero-copy > *{animation:none}
  .seal,.prayer-words.dimmable .w{transition:none}
}
