#site-page{--tone-dark:#5c5c56;--tone-light:#5f5f59;--tone-line:#cfcfca;color-scheme:light;width:100%;font-family:Arial,Helvetica,sans-serif}
#site-page *{box-sizing:border-box}

/* Without JavaScript: the approved drawing behind a plain project list. */
#site-page .bs-art{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
#site-page .bs-macro{display:block;position:absolute;inset:0;opacity:.74}
#site-page .bs-macro img{width:100%;height:100%;object-fit:cover;object-position:right top;display:block;max-width:none}
#site-page .project-list{width:min(48%,370px);background:transparent}
#site-page .project-item{border:0;border-bottom:1px solid var(--tone-line);border-radius:0;color:var(--tone-dark);background:transparent;margin:0;padding:0}
#site-page .project-item>summary{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:4px 12px;min-height:79px;padding:16px 0;margin:0;list-style:none;color:var(--tone-dark);background:transparent}
#site-page summary::-webkit-details-marker{display:none}
#site-page .project-item>summary .item-name{grid-column:1;grid-row:1;margin:0;padding:0;font-size:22px;line-height:1.08;font-weight:400;letter-spacing:-.03em;color:var(--tone-dark)}
#site-page .project-item>summary .item-type{grid-column:1;grid-row:2;margin:0;color:var(--tone-light);font-size:12px;line-height:1.5;font-weight:400;letter-spacing:.01em}
#site-page .plus{grid-column:2;grid-row:1/3;width:16px;height:16px;position:relative;color:var(--tone-dark)}
#site-page .plus:before,#site-page .plus:after{content:"";position:absolute;transform:none;top:7px;left:2px;height:1px;width:12px;background:currentColor;transition:transform 320ms cubic-bezier(.22,1,.36,1)}
#site-page .plus:after{transform:rotate(90deg)}
#site-page .project-item[open]>summary .plus:after{transform:rotate(0deg)}
#site-page .item-content{display:grid;gap:14px;padding:0 0 24px;color:var(--tone-dark)}
#site-page .item-content p{font-size:14px;line-height:1.65;margin:0 0 12px;color:var(--tone-dark)}
#site-page a{color:inherit;text-decoration:none}
#site-page .item-content a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:0;font-size:12px;text-decoration:underline;text-underline-offset:4px;color:var(--tone-dark)}
#site-page .instagram-icon{width:12px;height:12px}
#site-page .pure-branch{margin:0;padding:0;border:0;border-radius:0;background:transparent}
#site-page .pure-branch>summary{display:flex;align-items:center;min-height:44px;font-size:15px;list-style:none;color:var(--tone-dark)}
#site-page .pure-branch>summary:after{content:"+";margin-left:12px;background:none;width:auto;height:auto;flex:none}
#site-page .pure-branch[open]>summary:after{content:"−"}
#site-page .pure-letter{color:var(--tone-dark);font-weight:500}
#site-page .item-status,#site-page .item-note{font-size:12px}
#site-page .bs-footer a{display:inline-flex;align-items:center}
@media(max-width:580px){
  #site-page .project-list{width:100%}
  #site-page .project-item>summary .item-name{font-size:20px}
  #site-page .bs-macro{opacity:.6}
  #site-page .bs-macro img{object-position:center top}
}

/* ---------- picker wheel (JavaScript) ---------- */

#site-page.scroll-ready{--tone-dark:#5c5c56;--tone-light:#5f5f59;--tone-line:#cfcfca;--row:76px;--band:min(31rem,calc(100% - 40px));--name:clamp(1.3rem,.95rem + 1.1vw,1.85rem);--ink:var(--tone-dark);position:relative;height:100vh;height:100svh;min-height:0;overflow:hidden;background:#fff;color:var(--tone-dark);isolation:isolate}
#site-page.scroll-ready .bs-art{position:absolute;z-index:0}
#site-page.scroll-ready .bs-macro{display:none}
#site-page .bs-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#site-page.scroll-ready main{outline:none}
#site-page.scroll-ready .index{position:absolute;inset:0;min-height:0;width:auto;margin:0;padding:0;transform:none;transition:none}

#site-page .bs-scroll{position:absolute;z-index:3;inset:0;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#site-page .bs-scroll::-webkit-scrollbar{display:none}
#site-page .bs-slot{height:var(--row);scroll-snap-align:center}

/* A soft paper band keeps the turning names clear of the drawing. */
#site-page .bs-veil{position:absolute;z-index:1;inset:0;pointer-events:none}
/* A white veil keeps the names clear of the drawings: light over the brain, stronger in the deep web. */
#site-page .bs-veil:before{content:"";position:absolute;inset:0;background:radial-gradient(calc(min(31rem,calc(100vw - 40px)) * 1.05) calc(var(--row) * 4.9) at 50% 50%,rgba(255,255,255,.9) 0,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);opacity:var(--veil,.5)}
#site-page .bs-veil:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);opacity:0;transition:opacity 420ms ease}
#site-page.is-reading .bs-veil:after{opacity:1}

#site-page .bs-wheel{position:absolute;z-index:2;inset:0;pointer-events:none;transition:opacity 320ms ease}
#site-page .bs-face{position:absolute;left:50%;top:50%;display:grid;justify-items:start;align-content:center;gap:7px;width:var(--band);height:var(--row);padding-right:28px;text-align:left;white-space:nowrap;visibility:hidden;transform-origin:0 50%}
#site-page .bs-name{font-size:var(--name);line-height:1.05;letter-spacing:-.035em;color:var(--tone-dark)}
#site-page .bs-type{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.3;letter-spacing:.035em;color:var(--tone-light)}

#site-page .bs-band{position:absolute;z-index:2;left:50%;top:50%;width:var(--band);height:var(--row);transform:translate(-50%,-50%);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);pointer-events:none;transition:opacity 320ms ease,outline-color 160ms ease;outline:2px solid transparent;outline-offset:5px}
#site-page .bs-band .plus{position:absolute;right:0;top:50%;margin-top:-8px;color:var(--tone-dark)}
#site-page.is-pointing .bs-band .plus{transform:rotate(90deg)}
#site-page .bs-band .plus{transition:transform 320ms cubic-bezier(.22,1,.36,1)}
#site-page.picker-focus .bs-band{outline-color:var(--ink)}
#site-page.is-reading .bs-wheel,#site-page.is-reading .bs-band{opacity:0}

#site-page .bs-picker{position:absolute;z-index:4;left:50%;top:50%;width:var(--band);height:var(--row);margin:0;padding:0;list-style:none;transform:translate(-50%,-50%);pointer-events:none}
#site-page .bs-picker li{position:absolute;inset:0}
#site-page .bs-pick{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;color:transparent;font:inherit;font-size:1px;opacity:0;cursor:pointer}
.bs-haptic{display:none}

#site-page.scroll-ready .bs-header{position:absolute;z-index:5;inset:0 0 auto;display:flex;justify-content:space-between;gap:20px;padding:21px 32px;color:var(--tone-dark);font-size:clamp(11px,3.6vw,14px);letter-spacing:.025em;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff;pointer-events:none}
#site-page.scroll-ready .bs-header h1{font-size:clamp(12px,3.9vw,15px);color:var(--tone-dark)}
#site-page.scroll-ready .bs-footer{position:absolute;z-index:5;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:61px;padding:16px 32px;border:0;flex-wrap:nowrap;font-size:14px;letter-spacing:.04em;color:var(--tone-dark);pointer-events:none;transition:opacity 320ms ease}
#site-page.scroll-ready .bs-footer a{pointer-events:auto}
#site-page.is-reading .bs-footer{opacity:0}

/* ---------- reader ---------- */

#site-page .bs-reader{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--tone-dark);opacity:0;overflow:hidden;transition:opacity 340ms ease}
#site-page .bs-reader::backdrop{background:transparent}
#site-page .bs-reader.is-shown{opacity:1}
#site-page .bs-reader-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 58px,#000 112px,#000 calc(100% - 120px),transparent calc(100% - 70px));mask-image:linear-gradient(to bottom,transparent 0,transparent 58px,#000 112px,#000 calc(100% - 120px),transparent calc(100% - 70px))}
#site-page .bs-reader-body{width:calc(var(--band) + 40px);margin:0 auto;padding:calc(50svh - var(--row) / 2) 20px 150px}
/* The zoomed drawing stays in view around a pale reading column. */
#site-page .bs-entry{margin:0 -20px;padding:0 20px 8px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 20px,rgba(255,255,255,.8) calc(100% - 20px),rgba(255,255,255,0) 100%)}
#site-page .bs-reader-head{display:grid;justify-items:start;align-content:center;gap:7px;height:var(--row);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-align:left;transform:translateY(0);transition:transform 420ms cubic-bezier(.22,1,.36,1)}
#site-page .bs-reader-title{margin:0;font-size:var(--name);font-weight:400;line-height:1.05;letter-spacing:-.035em;color:var(--tone-dark);white-space:nowrap;outline:none}
#site-page .bs-reader-type{margin:0;font-size:12px;line-height:1.3;letter-spacing:.035em;color:var(--tone-light)}
#site-page .bs-reader-content{padding-top:30px;transform:translateY(14px);transition:transform 520ms cubic-bezier(.22,1,.36,1)}
#site-page .bs-reader.is-shown .bs-reader-content{transform:none}
#site-page .bs-reader .item-content{display:block;padding:0;color:var(--tone-dark)}
#site-page .bs-reader .item-story{max-width:none;padding:0}
#site-page .bs-reader .item-content p{font-size:16px;line-height:1.72;margin:0 0 1.05em;color:var(--tone-dark)}
#site-page .bs-reader .item-story .item-lead{font-size:19px;line-height:1.45;color:var(--tone-dark)}
#site-page .bs-reader .item-content strong{font-weight:500;color:var(--tone-dark)}
#site-page .bs-reader .item-note{font-size:12px;letter-spacing:.035em;line-height:1.7;color:var(--tone-light)}
#site-page .bs-reader .item-content>a{display:inline-flex;margin-top:14px;font-size:13px;letter-spacing:.035em;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
#site-page .bs-reader .pure-tree{margin:0 0 18px}
#site-page .bs-reader .pure-branch>summary{font-size:17px;color:var(--tone-dark);cursor:pointer}
#site-page .bs-reader .pure-branch[open]>summary{color:var(--ink)}
#site-page .bs-reader .pure-branch-text{font-size:16px}
/* Every photo is the same circle with a drawn ring. */
#site-page .photo{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;margin:14px 0 30px}
#site-page .photo-circle{position:relative;display:block;width:min(240px,68vw);aspect-ratio:1;border-radius:50%}
#site-page .photo-circle img,#site-page .photo-circle video{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#f4f2ee}
#site-page .photo-circle:after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--tone-line)}
#site-page .photo figcaption{font-size:12px;letter-spacing:.035em;color:var(--tone-light)}
#site-page .bs-reader a:focus-visible,#site-page .bs-reader summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#site-page .bs-reader-head{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
#site-page .bs-head-close{position:absolute;right:-14px;top:50%;width:44px;height:44px;margin-top:-22px;padding:0;border:0;background:none;color:var(--tone-dark);cursor:pointer;-webkit-tap-highlight-color:transparent}
#site-page .bs-head-close:before,#site-page .bs-head-close:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;margin:-.5px 0 0 -6px;background:currentColor;transform:rotate(45deg)}
#site-page .bs-head-close:after{transform:rotate(-45deg)}
#site-page .bs-head-close:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
[dir="rtl"] #site-page .bs-head-close{right:auto;left:-14px}
#site-page .bs-close{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:46px;height:46px;margin:0 0 0 -23px;padding:0;border:1px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
#site-page .bs-close:before,#site-page .bs-close:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;margin:-.5px 0 0 -8px;background:currentColor;transform:rotate(45deg)}
#site-page .bs-close:after{transform:rotate(-45deg)}
#site-page .bs-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(hover:hover){#site-page .bs-close:hover{background:var(--ink);color:#fff}}

@media(max-width:580px){
  #site-page.scroll-ready .bs-header{padding-inline:20px}
  #site-page.scroll-ready .bs-footer{padding-inline:20px}
  #site-page .bs-reader .item-content p{font-size:15.5px}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  #site-page.scroll-ready .bs-footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  #site-page .bs-reader-content{transform:none}
}
/* Arabic reads right to left: the wheel, its plus and the reader mirror; letters stay joined. */
[dir="rtl"] #site-page .bs-face{text-align:right;padding-right:0;padding-left:28px;transform-origin:100% 50%}
[dir="rtl"] #site-page .bs-band .plus{right:auto;left:0}
[dir="rtl"] #site-page .bs-reader-head{text-align:right}
/* Latin words keep their letter order inside the mirrored page: the summary
   runs left to right, sits on the right and keeps its + on the left. */
[dir="rtl"] #site-page .pure-branch>summary{direction:ltr;justify-content:flex-end}
[dir="rtl"] #site-page .pure-branch>summary:after{order:-1;margin-left:0;margin-right:12px}
[dir="rtl"] #site-page .bs-header h1{direction:ltr;unicode-bidi:isolate}
/* Project names read in their own script: latin names stay in order, Arabic names stay right to left. */
[dir="rtl"] #site-page .bs-name,[dir="rtl"] #site-page .bs-reader-title,[dir="rtl"] #site-page .item-name{unicode-bidi:plaintext;text-align:right}
[lang="ar"] body *{letter-spacing:0!important}
#site-page .cyclemax-intro{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:24px;margin:0 0 26px;direction:ltr}
#site-page .item-content .cyclemax-intro .item-lead{margin:0 0 10px}
#site-page .item-content .cyclemax-intro .item-note{margin:0;font-size:12px;line-height:1.6;letter-spacing:.025em}
#site-page .item-content .cyclemax-app-link{display:block;grid-column:2;grid-row:1;justify-self:end;width:104px;min-height:104px;margin:0;border:1px solid var(--tone-line,#cfcfca);border-radius:22px;background:#fff;overflow:hidden;text-decoration:none}
#site-page .cyclemax-app-link img{display:block;width:100%;height:auto;max-width:none}
[dir="rtl"] #site-page .cyclemax-intro-copy{direction:rtl}
#site-page .cyclemax-app-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}
#site-page .cyclemax-benefit{margin:26px 0}
#site-page .item-content .cyclemax-label,#site-page .bs-reader .item-content .cyclemax-label{margin:0 0 8px;font-size:12px;letter-spacing:.06em;color:var(--tone-light)}
#site-page .cyclemax-benefit p:last-child{margin-bottom:0}
#site-page .cyclemax-release{display:grid;gap:14px;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--tone-line)}
#site-page .item-content .cyclemax-release .item-note{margin:0;font-size:12px;line-height:1.6}
#site-page .item-content .cyclemax-release-cta{display:flex;justify-content:center;align-items:center;width:100%;min-height:52px;padding:12px 18px;margin:0;border:1px solid var(--tone-dark);font-size:13px;line-height:1.5;letter-spacing:.025em;text-align:center;text-decoration:none}
#site-page .cyclemax-release-cta:focus-visible{outline:2px solid var(--tone-dark);outline-offset:4px}
@media(hover:hover){#site-page .cyclemax-release-cta:hover{background:rgba(92,92,86,.06)}}
@media(max-width:380px){#site-page .cyclemax-intro{gap:16px;grid-template-columns:minmax(0,1fr) 88px}#site-page .item-content .cyclemax-app-link{width:88px;min-height:88px;border-radius:19px}}
/* An app shown the way a phone shows it: the icon, its name underneath. */
#site-page .item-content .cyclemax-app-link.app-with-name{min-height:0;border:0;border-radius:0;background:none;overflow:visible}
#site-page .app-with-name .app-icon{display:block;width:100%;aspect-ratio:1;border:1px solid var(--tone-line,#cfcfca);border-radius:22px;overflow:hidden;background:#fdfaf3}
#site-page .app-with-name .app-icon img{display:block;width:100%;height:100%}
#site-page .cyclemax-app-link.app-with-name img.app-name{display:block;width:88%;height:auto;margin:9px auto 0}
@media(max-width:380px){#site-page .app-with-name .app-icon{border-radius:19px}}
/* The research journal in the neuroarchitecture row: each article's number,
   question and summary, sober like the journal pages themselves. */
#site-page .neuro-research{border-top:1px solid var(--tone-line);margin-top:28px;padding-top:20px}
#site-page .item-content .research-label{margin:0 0 6px;font-size:12px;letter-spacing:.08em;color:var(--tone-light)}
#site-page .research-teaser{padding:16px 0;border-bottom:1px solid var(--tone-line)}
#site-page .item-content .research-teaser .research-no{margin:0 0 4px;font-size:11px;letter-spacing:.08em;color:var(--tone-light)}
#site-page .research-teaser h3{margin:0 0 6px;font-size:19px;font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--tone-dark)}
#site-page .item-content .research-teaser p{margin:0 0 4px}
#site-page .item-content .research-teaser a{min-height:32px}
#site-page .item-content a.research-all{margin-top:10px}
/* A timeline read from top to bottom: a thin line, a dot per date, the year
   above its sentence. Each date rises in as it scrolls into view, where the
   browser can tie an animation to scrolling; elsewhere all dates simply show. */
#site-page .timeline{position:relative;margin:26px 0 34px;padding:0 0 0 26px}
#site-page .timeline:before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--tone-line)}
#site-page .tl-item{position:relative;margin:0 0 28px}
#site-page .tl-item:last-child{margin-bottom:0}
#site-page .tl-item:before{content:"";position:absolute;left:-26px;top:9px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--tone-dark)}
#site-page .tl-item.tl-now:before{background:var(--tone-dark)}
#site-page .item-content .tl-item .tl-year,#site-page .bs-reader .item-content .tl-item .tl-year{margin:0 0 4px;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--tone-dark)}
#site-page .item-content .tl-item p{margin-bottom:0}
#site-page .tl-item .photo{margin:16px 0 0}
#site-page .item-content p.tl-credit{margin:-18px 0 30px;font-size:10.5px;line-height:1.5;letter-spacing:.02em;color:var(--tone-light);opacity:.8}
[dir="rtl"] #site-page .timeline{padding:0 26px 0 0}
[dir="rtl"] #site-page .timeline:before{left:auto;right:4px}
[dir="rtl"] #site-page .tl-item:before{left:auto;right:-26px}
@keyframes tl-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){#site-page .tl-item{animation:tl-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}}}
/* A booking button right under a project's lead, seen the moment it opens. */
#site-page .item-content .row-cta,#site-page .bs-reader .item-content .row-cta{display:flex;justify-content:center;align-items:center;width:100%;min-height:54px;padding:12px 18px;margin:4px 0 26px;border:0;border-radius:0;background:var(--tone-dark);color:#fff;font-size:14px;line-height:1.4;letter-spacing:.05em;text-align:center;text-decoration:none;transition:opacity .2s}
#site-page .row-cta:focus-visible{outline:2px solid var(--tone-dark);outline-offset:4px}
@media(hover:hover){#site-page .row-cta:hover{opacity:.88}}

/* One action-button style across project sections, including release signups. */
#site-page .item-content a.row-cta,
#site-page .bs-reader .item-content a.row-cta {
  grid-column:1 / -1;
  display:flex;justify-content:center;align-items:center;box-sizing:border-box;
  width:100%;min-height:54px;padding:12px 18px;margin:4px 0 26px;
  border:0;border-radius:0;background:var(--tone-dark,#5c5c56);color:#fff;
  font-size:14px;line-height:1.4;letter-spacing:.05em;text-align:center;text-decoration:none;
}
#site-page .item-content a.row-cta:focus-visible {outline:2px solid var(--tone-dark,#5c5c56);outline-offset:4px}
@media(hover:hover){#site-page .item-content a.row-cta:hover{background:var(--tone-dark,#5c5c56);color:#fff;opacity:.88}}
@media(prefers-reduced-motion:reduce){#site-page .item-content a.row-cta{transition:none}}
#site-page .bs-face{will-change:transform,opacity}
#site-page .bs-reader-scroll{overflow-anchor:none}
/* The decorative ring must not cover native video controls on touch screens. */
#site-page .photo-circle:after{pointer-events:none}