/* काम बोलता है (kaam.html) — skyline of the 2012–17 projects. Paper = the scrapbook's page colour. */
.kbp{background:#F6EBD9}
.kbp .nav{background:rgba(246,235,217,.9)}
.kb{--ph:clamp(270px,40vh,360px);position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 68px);overflow:hidden;
  background:#F6EBD9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the site-wide section{padding:110px 0} must not touch this page's two blocks */
.kb>.kb-stage{padding:0}
.kb>.kb-panel{padding-block:16px 8px}
/* ---------- panel ---------- */
.kb-panel{position:relative;z-index:6;flex:1 0 var(--ph);display:flex;align-items:center;padding-top:16px;padding-bottom:8px}
.kb-home{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.kb-photo{flex:none;height:min(calc(var(--ph) - 50px),300px);aspect-ratio:4/5;background:#fff;padding:8px 8px 30px;
  box-shadow:0 14px 30px -14px rgba(40,30,15,.55);transform:rotate(-2.5deg)}
.kb-photo img{width:100%;height:100%;object-fit:cover;object-position:56% 18%;display:block}
.kb-years{font-family:"Kalam",cursive;font-size:clamp(18px,1.8vw,26px);color:#0E6D37;transform:rotate(-2deg);display:inline-block}
.kb-tag{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,104px);line-height:1;color:#ED1D24;margin:6px 0 12px;letter-spacing:-.01em;word-break:break-word}
.kb-hint{font-size:15px;color:var(--ink-2);max-width:34ch}

.kb [hidden]{display:none!important}
.kb-detail{max-width:720px}
.kb-detail.in{animation:kbIn .32s cubic-bezier(.2,.8,.3,1)}
@keyframes kbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kb-meta{display:flex;align-items:center;gap:14px}
.kb-yr{font-family:var(--mono);font-size:14px;color:#A82512}
.kb-st{font-family:var(--serif);font-size:15px;color:#0E6D37;border:2px solid #0E6D37;border-radius:6px;padding:0 9px;transform:rotate(-4deg);opacity:.85}
.kb-st:empty{display:none}
.kb-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,min(4.2vw,6.4vh),58px);line-height:1.15;color:#0D3B2A;margin:6px 0 6px}
.kb-hook{font-family:"Kalam",cursive;font-size:clamp(17px,min(1.7vw,3vh),23px);line-height:1.4;color:#2A3236;margin-bottom:10px}
.kb-facts{list-style:none;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:#3E474C;display:grid;gap:4px}
.kb-facts li{padding-left:22px;position:relative}
.kb-facts li::before{content:"✓";position:absolute;left:0;color:#0E6D37;font-weight:700}

/* ---------- skyline: one packed row on the road verge (layout computed in kaam.js) ---------- */
.kb-stage{flex:none;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.kb-city{--ar:3.6;position:relative;width:min(100%,calc((100svh - 68px - var(--ph)) * var(--ar)));aspect-ratio:var(--ar);flex:none}
/* the road runs to the screen edges, past the centred scene */
.kb-slot.t-road{left:calc(50% - 50vw)!important;right:auto;width:100vw!important}
/* a slot is the structure's place on the ground line; it clips below that line, so each
   structure rises out of the ground */
.kb-slot{position:absolute;pointer-events:none;clip-path:inset(-60% -12% 0 -12%)}
.kb-slot.t-road,.kb-slot.t-sky{clip-path:none}
.kb-b{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;pointer-events:none;
  -webkit-tap-highlight-color:transparent;transform-origin:50% 100%;
  transform:translateY(102%);transition:transform 1s cubic-bezier(.2,.85,.25,1.04) var(--d,0ms),opacity .3s,filter .3s}
.kb-city.up .kb-b{transform:none}
.kb-city.still .kb-b{transition:opacity .3s,filter .3s}
.kb-b svg{display:block;width:100%;height:100%;pointer-events:none;overflow:visible}
.kb-b svg *{pointer-events:visiblePainted}
.kb-b.f-jet{transform:translate(-90%,60%) rotate(4deg);opacity:0;transition:transform 1.8s cubic-bezier(.2,.7,.3,1) 1.2s,opacity .6s 1.2s,filter .3s}
.kb-city.up .kb-b.f-jet{transform:none;opacity:1}
.kb-b.ground{transform:none;transition:opacity .3s,filter .3s}

/* hover / focus: the chosen one stays in colour, lifts and comes forward; the rest step back */
.kb-city.focus .kb-b{opacity:.42;filter:saturate(.25)}
.kb-city.focus .kb-slot.on:not(.t-road){z-index:9!important}
.kb-city.focus .kb-b.on{opacity:1;filter:drop-shadow(0 10px 12px rgba(40,30,15,.28))}
.kb-city.up .kb-b.on:not(.ground):not(.f-jet){transform:translateY(-10px)}
.kb-city.risen .kb-b{transition-delay:0ms}
.kb-b:focus{outline:none}
.kb-b:focus-visible{outline:2px dashed #ED1D24;outline-offset:4px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .kb-b,.kb-b.f-jet{transition:opacity .2s,filter .2s!important}
  .kb-detail.in{animation:none}
}

/* phones/tablets: the skyline keeps its proportions and scrolls sideways */
@media (max-width:900px){
  .kb{min-height:0}
  .kb>.kb-panel{flex:none;padding-block:20px 14px}
  .kb-panel{min-height:330px;display:flex;align-items:flex-end}
  .kb-home{gap:16px}
  .kb-photo{height:auto;width:min(36vw,190px);padding:6px 6px 22px}
  .kb-tag{font-size:clamp(30px,8.6vw,52px)}
  .kb-hint{font-size:14px}
  .kb-stage{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;padding-top:30px}
  .kb-stage::-webkit-scrollbar{display:none}
  .kb-city{width:1150px}
  .kb-slot.t-road{left:0!important;width:100%!important}
}