/* 'Ilm al-Nafs · III·b How a mirror clouds (2026-10-26). Scoped to #cloud and the hero breadcrumb; nothing else on the page is restyled. */
@font-face{font-family:"AmiriCl";src:url(fonts/amiri-cl.woff?v=2) format("woff");font-display:swap}
#cloud{--cla:"AmiriCl",var(--ar);overflow:hidden;overflow:clip;padding-top:9vh}
#cloud .ar{font-family:var(--cla)}
#cloud::before{content:"";position:absolute;left:50%;top:0;width:min(560px,80vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(232,201,138,.5),transparent)}
#cloud::after{content:"✦";position:absolute;left:50%;top:-.62em;transform:translateX(-50%);color:var(--gold);font-size:12px;opacity:.7;padding:0 10px;background:var(--bg)}
.clhead{padding:0 24px;max-width:34em;margin:0 auto;width:100%;box-sizing:border-box;text-align:center}
.clhead h2{margin:6px 0 8px;font-weight:400;font-size:clamp(30px,7vw,44px);line-height:1.12;color:#fff3e4}
.clhead h2 .ar{display:block;font-size:.62em;color:var(--gold);margin-top:4px;letter-spacing:0}
.clhead .lead{font-style:italic;color:#d9cfd6;margin:0 auto 4px;max-width:26em}
#cloudVis{height:54svh;min-height:360px;max-height:620px;touch-action:pan-y}
/* phones: the heart stays in view (sticky) while the clouds are chosen beneath it */
@media (max-width:899px){#polish{scroll-margin-top:64vh}.clstage{position:sticky;top:0;z-index:3;margin-top:6px}
 .clstage::before{content:"";position:absolute;inset:-18px 0 -22px;z-index:-1;background:radial-gradient(100% 60% at 50% 40%,#0d0814,#08050c 70%);-webkit-mask-image:linear-gradient(transparent,#000 18px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(transparent,#000 18px,#000 calc(100% - 22px),transparent)}
 #cloudVis{height:46svh;min-height:310px}
 .clread{padding:0 22px 2px;max-width:34em;margin:0 auto;box-sizing:border-box}
 .cltray{padding-top:12px}
 #cloudVis .clb[data-i="0"],#cloudVis .clb[data-i="1"]{top:calc(44px + env(safe-area-inset-top))}
 #cloudVis .clb[data-i="2"],#cloudVis .clb[data-i="3"]{bottom:12px}
 .clouds button{min-height:38px;padding:6px 12px 6px 11px;font-size:16.5px}}
#cloudVis.drop canvas{filter:drop-shadow(0 0 18px rgba(255,214,160,.25))}
.clb{position:absolute;z-index:2;margin:0;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.1;pointer-events:none;transition:opacity .9s ease,filter .9s ease;text-align:center}
.clb .ar{font-size:20px;line-height:1.3}
.clb i{font-size:12px;letter-spacing:.2em;text-transform:lowercase;color:#d8cdd8;font-style:normal}
.clb[data-i="0"]{left:6%;top:6%}.clb[data-i="0"] .ar{color:#ffd88a}
.clb[data-i="1"]{right:6%;top:6%}.clb[data-i="1"] .ar{color:#a9d2ff}
.clb[data-i="2"]{left:6%;bottom:5%}.clb[data-i="2"] .ar{color:#ffa6c9}
.clb[data-i="3"]{right:6%;bottom:5%}.clb[data-i="3"] .ar{color:#9ff2d6}

.cltray{padding:2px 22px 6px;max-width:34em;margin:0 auto;width:100%;box-sizing:border-box}
.clm{display:flex;align-items:center;gap:12px;margin:2px 0 4px}
.clm small{flex:0 0 auto;min-width:9.5em;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.clbar{position:relative;flex:1;height:3px;background:rgba(232,201,138,.14);border-radius:2px}
.clbar::before{content:"";position:absolute;inset:-4px 0;border-top:1px solid rgba(232,201,138,.18);border-bottom:1px solid rgba(232,201,138,.18)}
.clbar span{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;background:linear-gradient(90deg,#ff8a5c,#ffd27a,#8ff0c8,#8cc4ff,#d39bff);box-shadow:0 0 10px rgba(255,214,160,.35);transition:width 1.4s ease,opacity 1.4s ease}
.clnote{min-height:2.6em;margin:8px 0 2px;font-style:italic;font-size:16.5px;line-height:1.45;color:#f1e6da;text-align:center;opacity:0;transition:opacity 1s ease}
.clnote.on{opacity:1}
.clouds{margin:6px 0 0}
.clg{margin:12px 0 0}
.clg>p{margin:0 0 7px;display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#bfb2c2}
.clg>p span{letter-spacing:.06em;text-transform:none;font-style:italic;font-size:14px;color:#9d92a3}
.clg>p::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,201,138,.35),transparent)}
.clg>div{display:flex;flex-wrap:wrap;gap:8px}
.clouds button{--h:200,160,255;position:relative;display:inline-flex;align-items:baseline;gap:.45em;padding:7px 14px 7px 12px;min-height:40px;border-radius:999px;border:1px solid rgba(232,201,138,.32);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));color:#f1e6da;font:italic 17px/1.1 var(--serif);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .5s,color .5s,opacity .8s,background .8s;user-select:none;-webkit-user-select:none}
.clouds button::before{content:"";align-self:center;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0,rgb(var(--h)) 45%,rgba(var(--h),.0) 100%);box-shadow:0 0 6px rgba(var(--h),.7)}
.clouds button b{font-weight:400}
.clouds button .ar{font-size:15px;color:var(--gold);font-style:normal;opacity:.9}
.clouds button:hover{border-color:rgba(232,201,138,.75);color:#fff}
.clouds button:focus-visible{outline:1px dashed #ffe9b0;outline-offset:3px}
.clouds button[aria-pressed="true"]{opacity:.42;border-style:dashed;cursor:default;background:none}
.clouds button[aria-pressed="true"]::before{box-shadow:none;filter:grayscale(.6)}
.clact{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0 4px;flex-wrap:wrap}
.clact[hidden]{display:none}
.clgo{position:relative;display:inline-flex;align-items:center;gap:.5em;padding:11px 26px;border-radius:999px;color:#1a0f12;text-decoration:none;font:500 17px/1 var(--serif);letter-spacing:.06em;background:linear-gradient(100deg,#f6dfa6,#ffe9c2 40%,#f1c97e);box-shadow:0 0 0 1px rgba(255,236,190,.6),0 6px 26px -8px rgba(255,200,120,.55)}
.clgo::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1px solid rgba(232,201,138,.35)}
.clact.full .clgo{animation:clglow 4.5s ease-in-out infinite}
@keyframes clglow{0%,100%{box-shadow:0 0 0 1px rgba(255,236,190,.6),0 6px 26px -8px rgba(255,200,120,.55)}50%{box-shadow:0 0 0 1px rgba(255,236,190,.9),0 8px 40px -6px rgba(255,190,140,.85)}}
button.clgo{border:0;cursor:pointer}button.clgo:disabled{opacity:.45;cursor:default}
.clto{color:var(--gold);text-decoration:none;font-size:17px;letter-spacing:.06em;border-bottom:1px solid rgba(232,201,138,.4);padding:2px 0}
.clto:focus-visible{outline:1px dashed #ffe9b0;outline-offset:4px}
.clgo:focus-visible{outline:1px dashed #ffe9b0;outline-offset:6px}
.cltxt{padding-top:14px}
.cltxt details{border-top:1px solid rgba(232,201,138,.18);padding:0}
.cltxt details:last-of-type{border-bottom:1px solid rgba(232,201,138,.18)}
.cltxt summary{list-style:none;cursor:pointer;padding:14px 26px 14px 0;position:relative;font-size:18px;color:#f3e7d8;-webkit-tap-highlight-color:transparent}
.cltxt summary::-webkit-details-marker{display:none}
.cltxt summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .5s}
.cltxt details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.cltxt summary small{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.cltxt summary:focus-visible{outline:1px dashed #ffe9b0;outline-offset:2px}
.cltxt details>div{padding:0 0 14px}
.cltxt details p{margin:0 0 10px;font-size:15.5px;line-height:1.6;color:#ddd2d8}
.cltxt .cite{margin-top:8px}
.clghost{position:fixed;left:0;top:0;z-index:60;pointer-events:none;margin:-18px 0 0 -30px;padding:7px 14px;border-radius:999px;border:1px solid rgba(232,201,138,.6);background:rgba(20,12,26,.82);color:#fff3e4;font:italic 17px/1 var(--serif);box-shadow:0 0 24px rgba(180,130,255,.35)}
/* breadcrumb back to the hub */
.crumb{margin:0 0 14px;font-size:13px;letter-spacing:.14em;color:var(--dim)}
.crumb a{color:#e9dcb8;text-decoration:none;border-bottom:1px solid rgba(232,201,138,.35)}
.crumb .ar{font-size:16px;letter-spacing:0}
.crumb span[aria-hidden]{margin:0 .5em;color:var(--gold);opacity:.7}
.back .ar{font-size:15px;letter-spacing:0}
@media (min-width:900px){
 #cloud{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"vis head" "vis tray" "vis pol" "vis txt";grid-template-rows:auto auto auto 1fr;align-items:start;padding-top:0}
 #cloud .clhead{grid-area:head;text-align:left;margin:0;padding:12vh 6vw 0 2vw}
 #cloud .clhead .lead{margin-left:0}
 #cloud .clstage{grid-area:vis;position:sticky;top:0;height:100vh;min-height:640px}
 #cloud #cloudVis{height:100%;max-height:none;min-height:0}
 #cloud .clread{position:absolute;left:50%;bottom:calc(5% + 58px);transform:translateX(-50%);width:min(24em,56%);z-index:3}
 #cloud .clread .clnote{text-align:center}
 #cloud .clread .clnote{min-height:2.9em}
 #cloud .cltray{grid-area:tray;margin:0;padding:10px 6vw 0 2vw;max-width:36em}
 #cloud .clact{justify-content:flex-start}
 #cloud .clpolish{grid-area:pol;margin:0;padding:28px 6vw 8px 2vw;max-width:36em}
 #cloud .cltxt{grid-area:txt;margin:0;padding:10px 6vw 60px 2vw;max-width:36em}
}
@media (prefers-reduced-motion:reduce){.clact.full .clgo{animation:none}}
.clb.out .ar,.clb.out i{color:#7d7484!important}
.clb .ar,.clb i{transition:color 1.2s ease}
.clgone{font-style:normal;color:#b7aebd;letter-spacing:.02em}

/* one heart: rub to polish (2026-10-26) */
#cloudCv{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none}
#cloudCv:focus-visible{outline:1px dashed #ffe9b0;outline-offset:-3px}
#cloudVis.rub #cloudCv{cursor:grab;touch-action:none}
.clhint{margin:2px 0 0;text-align:center;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.clhint[hidden]{display:none}
#cloudVis .breath{top:auto;bottom:calc(14px + 2.6em);z-index:2}
#cloudVis .breath .ar{font-size:26px}
#cloudVis .breath i{font-size:15px}
.clpolish{padding-top:22px}
.clpolish h3{margin:4px 0 10px;font-weight:400;font-size:clamp(24px,5.4vw,32px);line-height:1.15;color:#fff3e4}
.clpolish h3 .ar{font-size:.85em;color:var(--gold);margin-left:.3em}
#cloud .clpolish .prac button .ar,#cloud .clpolish h3 .ar,#cloud .clpolish .quote .ar{font-family:var(--cla)}