/* circlesco.tech · About only (title, story words, how we work, the shelf, principles, also true) */

/* ============ TITLE ============ */
.ab-hero{background:var(--white)}
.ab-hero-in{padding:calc(var(--nav-h) + clamp(84px,19vh,240px)) var(--gut) clamp(56px,8vh,110px)}
.ab-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,3vh,40px)}
.ab-meta-l{display:inline-flex;align-items:center;gap:12px}
.ab-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 64px}
.ab-title{font-weight:900;font-size:clamp(48px,8.6vw,170px);line-height:.9;letter-spacing:-.045em;margin-left:-.03em;max-width:none}
.ab-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ab-title .w{display:inline-block;will-change:transform,filter}
.ab-title em{color:var(--blue)}
.ab-side{margin-left:auto;max-width:520px;display:flex;flex-direction:column;gap:14px}
.ab-statement{font-size:clamp(17px,1.4vw,22px);font-weight:500;line-height:1.3;letter-spacing:-.01em}

/* ============ STORY: words light up with scroll ============ */
.ab-story{padding:clamp(72px,9vw,130px) 0 clamp(80px,10vw,150px);background:var(--white);border-top:1px solid var(--line)}
.ab-story-text{font-weight:800;font-size:clamp(28px,3.4vw,58px);line-height:1.08;letter-spacing:-.035em;max-width:22em}
.ab-story-text .wd{display:inline-block;color:rgba(11,11,15,.16);transition:color .35s var(--ease);margin-right:.26em}
.ab-story-text .wd.is-lit{color:var(--ink)}
.ab-story-text .wd.is-blue.is-lit{color:var(--blue)}

/* ============ HOW WE WORK ============ */
.ab-how{padding:clamp(72px,9vw,130px) 0;background:var(--g1)}
.ab-how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:clamp(32px,6vw,120px);align-items:start}
.ab-sticky{position:sticky;top:calc(var(--nav-h) + 32px);display:flex;flex-direction:column;gap:12px}
.ab-how-list li{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(16px,2vw,28px);row-gap:14px;padding:clamp(26px,3vw,44px) 0;border-top:1px solid var(--line)}
.ab-how-list li:last-child{border-bottom:1px solid var(--line)}
.ab-no{grid-row:1 / span 2;padding-top:.6em;color:var(--g3)}
.ab-how-word{font-weight:900;font-size:clamp(34px,4.2vw,68px);line-height:.95;letter-spacing:-.04em;transition:color .5s var(--ease)}
.ab-how-list li:hover .ab-how-word{color:var(--blue)}
.ab-how-text{font-size:var(--t-lead);line-height:1.35;max-width:30em;color:var(--ink)}

/* ============ THE SHELF ============ */
/* desktop: pinned for one screen while the five frames slide left (About's one pin, with Skip); phones and reduced motion: native sideways scroll */
.ab-shelf{position:relative;padding:clamp(72px,9vw,130px) 0 clamp(80px,10vw,150px);background:var(--white);overflow:hidden}
.ab-shelf .sec-head a{border-bottom:1px solid currentColor;color:var(--ink)}
.ab-shelf-track{display:flex;gap:clamp(20px,2.6vw,44px);padding-left:max(var(--gut),calc((100vw - var(--max)) / 2));width:max-content;will-change:transform}
.shelf-item{display:block;width:clamp(300px,36vw,620px);flex:0 0 auto}
.shelf-item .frame{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.shelf-item:hover .frame{transform:translateY(-8px);box-shadow:0 1px 0 rgba(11,11,15,.04),0 44px 70px -34px rgba(11,11,15,.3)}
.shelf-item .screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B0B0F}
.shelf-cap{display:flex;flex-direction:column;gap:4px;margin-top:16px;color:var(--g3)}
.shelf-cap b{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em}
.ab-shelf-skip{position:absolute;right:var(--gut);bottom:28px;z-index:3;height:40px;padding:0 16px;border-radius:10px;border:1.5px solid var(--ink);font-family:var(--mono);font-size:12px;color:var(--ink);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.ab-shelf-skip:hover{background:var(--ink);color:#fff}
.ab-shelf.is-pinned{height:100vh;min-height:620px;padding:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,56px)}
.ab-shelf.is-pinned>.wrap{flex:0 0 auto}
.ab-shelf.is-pinned .sec-head{margin-bottom:0}
.ab-shelf.is-pinned .ab-shelf-skip{opacity:1;pointer-events:auto}
.ab-shelf.is-scroll .ab-shelf-track{overflow-x:auto;width:auto;padding-right:var(--gut);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important}
.ab-shelf.is-scroll .ab-shelf-track::-webkit-scrollbar{display:none}
.ab-shelf.is-scroll .shelf-item{scroll-snap-align:start}

/* ============ PRINCIPLES ============ */
.ab-prin{padding:clamp(72px,9vw,130px) 0;background:var(--ink);color:#fff}
.ab-prin .sec-head{border-bottom-color:var(--line-dark)}
.ab-prin .sec-head .eyebrow{color:#fff}
.ab-prin .dim{color:rgba(255,255,255,.55)}
.ab-prin-list li{display:grid;grid-template-columns:40px minmax(0,1.3fr) minmax(0,1fr);gap:16px clamp(16px,3vw,56px);align-items:baseline;padding:clamp(22px,2.6vw,38px) 0;border-bottom:1px solid var(--line-dark)}
.ab-prin-list li:first-child{padding-top:0}
.ab-prin-list .ab-no{grid-row:auto;padding-top:0;color:rgba(255,255,255,.5)}
.ab-prin-word{font-weight:800;font-size:clamp(26px,2.9vw,46px);line-height:1.02;letter-spacing:-.035em}
.ab-prin-list p{font-size:var(--t-lead);line-height:1.35;color:rgba(255,255,255,.72);max-width:26em}

/* ============ ALSO TRUE ============ */
.ab-facts{padding:clamp(72px,9vw,130px) 0;background:var(--white)}
.ab-facts-list li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px clamp(20px,3vw,48px);padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ab-facts-list li:first-child{padding-top:0}
.ab-facts-list p{font-size:var(--t-lead);line-height:1.35;max-width:34em}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .ab-how-grid{grid-template-columns:1fr;gap:32px}
  .ab-sticky{position:static;flex-direction:row;align-items:baseline;gap:18px}
}
@media (max-width:900px){
  .ab-hero-in{padding-top:calc(var(--nav-h) + 12vh)}
  .ab-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .ab-title{font-size:clamp(44px,12.5vw,72px)}
  .ab-side{margin-left:0;max-width:none}
  .ab-story-text{font-size:clamp(26px,7vw,34px);max-width:none}
  .ab-how-list li{grid-template-columns:28px minmax(0,1fr)}
  .ab-how-word{font-size:clamp(32px,9.5vw,44px)}
  .ab-shelf .sec-head{flex-wrap:wrap;row-gap:6px}
  .ab-shelf .sec-head .eyebrow{white-space:nowrap}
  .ab-shelf-skip{display:none}
  .shelf-item{width:78vw}
  .ab-prin-list li{grid-template-columns:28px minmax(0,1fr)}
  .ab-prin-list p{grid-column:2}
  .ab-facts-list li{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ab-hero-in{padding-top:calc(var(--nav-h) + 13vh)}
  .ab-sticky{flex-direction:column;align-items:flex-start;gap:6px}
  .ab-how-list li{row-gap:10px}
  .ab-prin-list li{gap:8px 14px}
}
@media (prefers-reduced-motion:reduce){
  .ab-title .w{transform:none!important;filter:none!important;opacity:1!important}
  .ab-story-text .wd{color:var(--ink)}
  .ab-story-text .wd.is-blue{color:var(--blue)}
  .ab-shelf-track{transform:none!important}
  .ab-shelf-skip{display:none}
}