/* limonocode deep v2 — WDD. Глубина: слои раскрываются, размеры не растут. */
:root{--edge:clamp(16px,3vw,40px);--d1:.18s;--d2:.32s;--d3:.6s;--ease:cubic-bezier(.2,.7,0,1)}
/* одна левая линия */
.top,.hero,.years,.strip,.band,.foot{padding-left:var(--edge);padding-right:var(--edge)}
@media (min-width:701px){.top nav a{font-size:13px}}
.top nav a.on{box-shadow:inset 0 -3px 0 var(--lemon)}
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--edge);align-items:end}
.hero h1{grid-column:1/-1}
.hero p{grid-column:1;max-width:60ch}
.now{grid-column:2;grid-row:2/span 2;align-self:end;border-left:2px solid var(--ink);padding-left:1rem;margin-bottom:1rem}
.now h2{font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .6rem}
.now ul{list-style:none;margin:0;padding:0}
.now li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid rgba(17,17,17,.15)}
.now li span:last-child{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.85rem;opacity:.7}
.years .legend:first-of-type{display:none}
.years .legend:last-of-type{display:none}
.years li:hover .track::after{content:attr(data-tip);position:absolute;right:0;top:-1.3rem;font:500 .72rem/1 ui-monospace,monospace;opacity:.7}
.years .track{position:relative}
/* полоса: год слева в узкой колонке, текст до 60ch, кадр справа */
.strip{grid-template-columns:4.5rem minmax(0,60ch) minmax(0,1fr)}
.strip small{font-variant-numeric:tabular-nums}
.strip .frame{grid-column:3;grid-row:1/span 2;align-self:start;justify-self:end;width:min(100%,26rem);aspect-ratio:16/10;object-fit:cover;object-position:left top;border:2px solid currentColor;opacity:0;transform:translateX(8px);transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease)}
.strip:hover .frame,.strip:focus-within .frame,.strip.seen .frame{opacity:1;transform:none}
/* разбор по клику */
.case{grid-column:2;margin-top:.6rem}
.case summary{cursor:pointer;list-style:none;display:inline-flex;gap:.5rem;align-items:center;font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:.45rem 0;border-bottom:2px solid var(--lemon)}
.case summary::-webkit-details-marker{display:none}
.case summary::after{content:"+";font-family:ui-monospace,monospace;transition:transform var(--d1) var(--ease)}
.case[open] summary::after{transform:rotate(45deg)}
.case dl{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.4rem 1rem;margin:.8rem 0 0}
.case dt{font:500 .8rem/1.4 ui-monospace,monospace;opacity:.7}
.case dd{margin:0}
.case::details-content{block-size:0;overflow:hidden;transition:block-size var(--d2) var(--ease),content-visibility var(--d2) allow-discrete}
.case[open]::details-content{block-size:auto}
html{interpolate-size:allow-keywords}
/* живые проекты — тёмные; закрытые — бумага; лимон только меткой */
.strip.lemon{background:var(--paper);color:var(--ink)}
/* New Ekb график */
.growth{display:grid;gap:.35rem;margin:.4rem 0 0;padding:0;list-style:none}
.growth li{display:grid;grid-template-columns:3rem minmax(0,1fr) 5.5rem;gap:.6rem;align-items:center;font:500 .85rem/1 ui-monospace,monospace}
.growth i{display:block;height:6px;background:var(--ink);width:calc(var(--v) / 61579 * 100%);transform-origin:left}
.growth b{font-weight:500;text-align:right}
@media (max-width:700px){
 .hero{grid-template-columns:1fr}.now{grid-column:1;grid-row:auto;margin-top:1rem}
 .strip{grid-template-columns:1fr}.case,.strip .frame{grid-column:1;grid-row:auto}
 .strip .frame{justify-self:start;width:100%;opacity:1;transform:none;margin-top:.6rem}
 .case dl{grid-template-columns:1fr;gap:.1rem}.case dd{margin-bottom:.5rem}
}
:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
@media (max-width:700px){.case summary{min-height:44px}}
/* правки Critiquito/Webby */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--lemon)}
.ink :focus-visible,.strip.ink :focus-visible{outline-color:var(--lemon);box-shadow:0 0 0 5px var(--ink)}
@media (max-width:700px){.top nav a{min-height:44px;display:inline-flex;align-items:center}}
/* фокус: двойное кольцо на всех ширинах */
html body :focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--lemon)}
html body .ink :focus-visible,html body .strip.ink :focus-visible{outline-color:var(--lemon);box-shadow:0 0 0 6px var(--ink)}