@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSansArabic-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSans-400.woff2) format('woff2')}
:root{--field:#0E0F0F;--line:#CFC7B8;--ink:#CFC7B8;--ink-quiet:rgba(207,199,184,.66)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--field);color:var(--ink)}
body{overflow:hidden;-webkit-text-size-adjust:100%;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scene{position:fixed;inset:0;overflow:hidden;
  --s:min(calc(60vw / 1163),calc(64vh / 700));
  --stage-x:33vw;--stage-y:8vh;--fade0:60vh;--fade1:72vh;
  --mark-w:clamp(120px,10vw,186px);--mark-x:12.5vw;
  --mark-base:calc(var(--stage-y) + 422.901 * var(--s))}
@media (orientation:portrait){
  .scene{--vh:1vh}
}
@supports (height:1svh){@media (orientation:portrait){.scene{--vh:1svh}}}
@media (orientation:portrait){
  .scene{--s:min(calc(85vw / 500),calc(47 * var(--vh) / 600));
    --stage-x:calc(7.5vw - 105 * var(--s));--stage-y:calc(7 * var(--vh));--fade0:calc(49 * var(--vh));--fade1:calc(56 * var(--vh));
    --mark-w:clamp(104px,31vw,170px);--mark-h:calc(var(--mark-w) * .2426);--mark-x:calc(var(--stage-x) + 164.45 * var(--s));
    --mark-base:calc(var(--fade1) + 6.5 * var(--vh) + var(--mark-h));
    --copy-top:calc(var(--mark-base) + 3.3 * var(--vh));
    --nodes-top:calc(var(--copy-top) + 27px + 5.4 * var(--vh))}
}
.stage{position:absolute;left:var(--stage-x);top:var(--stage-y);width:calc(1198 * var(--s));height:calc(1313 * var(--s));pointer-events:none;will-change:transform}
.dissolve{position:absolute;left:0;right:0;top:var(--fade0);bottom:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,15,15,0) 0,var(--field) calc(var(--fade1) - var(--fade0)),var(--field) 100%)}
.stage svg,.stage .plate{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.fade-guide{position:absolute;left:0;width:1px;top:var(--fade0);height:calc(var(--fade1) - var(--fade0));pointer-events:none;visibility:hidden}
#light{position:absolute;inset:0;width:0;height:0;display:block}
#rock-sketch{stroke:var(--line)}
#primary-mass{stroke-width:2.02}#structural-definition{stroke-width:1.35}#architectural-detail,#optional-hints{stroke-width:1.01}
.stage .plate{display:none}
.no-js .stage .plate,.fallback .stage .plate{display:block}
.no-js #light,.fallback #light{display:none}
.brand{position:absolute;left:var(--mark-x);top:var(--mark-base);width:var(--mark-w);margin:0;line-height:0;transform:translateY(-100%)}
.brand svg{display:block;width:100%;height:auto}
.brand #rock-wordmark{fill:var(--ink)}
.copy{will-change:opacity;position:absolute;left:var(--mark-x);top:calc(var(--mark-base) + clamp(26px,3.6vh,40px));margin:0;font-weight:400;
  font-size:clamp(17px,1.3vw,21px);line-height:1.6;letter-spacing:.01em;color:rgba(207,199,184,.82);white-space:nowrap}
.channels{will-change:opacity;position:absolute;left:var(--mark-x);bottom:9vh;margin:0;padding:0}
.nodes{display:flex;gap:8px;list-style:none;margin:0 0 0 -15.5px;padding:0}
.nodes a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:rgba(207,199,184,.52);transition:color .6s ease}
.nodes svg{width:13px;height:13px;fill:currentColor}
.nodes a:hover,.nodes a:focus-visible{color:var(--ink)}
.nodes a:focus-visible{outline:1px solid rgba(207,199,184,.6);outline-offset:-6px}
@media (orientation:portrait){
  #primary-mass{stroke-width:2.27}#structural-definition{stroke-width:1.51}#architectural-detail,#optional-hints{stroke-width:1.13}
  .brand{left:50%;transform:translate(-50%,-100%)}
  .copy{top:var(--copy-top);left:50%;transform:translateX(-50%);text-align:center;font-size:clamp(16px,4.3vw,19px)}
  .channels{bottom:auto;left:50%;transform:translateX(-50%);top:min(var(--nodes-top),calc(97 * var(--vh) - 92px))}
  .nodes{display:grid;grid-template-columns:repeat(8,24px);row-gap:4px;column-gap:0;margin:0}
  .nodes li{grid-column:span 2;display:flex;justify-content:center}
  .nodes li:nth-child(5){grid-column:2 / span 2}
  .nodes a{width:46px;height:44px}
  .nodes svg{width:14px;height:14px}
}
.js.intro .copy,.js.intro .channels{opacity:0}
.js.intro #rock-sketch path{stroke-dasharray:1 1.02;stroke-dashoffset:1.01}
@media (prefers-reduced-motion:reduce){.js.intro .copy,.js.intro .channels{opacity:1}.js.intro #rock-sketch path{stroke-dasharray:none;stroke-dashoffset:0}}
.plate-mode .scene{--s:1px;--stage-x:0px;--stage-y:0px;--fade0:100000px;--fade1:100001px}
.plate-mode .dissolve{display:none}
.plate-mode #rock-sketch,.plate-mode .brand,.plate-mode .copy,.plate-mode .channels{visibility:hidden}