/* shared design for project pages; each page sets its colours in :root */
:root{ --bg:#EEEBE6; --ink:#2A372D; --muted:#6C6961; --line:#D8D3CA; --card:#E4E0D9; }
html{color-scheme:light;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.45 "EB Garamond",Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
html[lang="en"] .uk, html[lang="uk"] .en{display:none !important}
img{display:block;max-width:100%;height:auto}

/* top bar */
.bar{position:absolute;inset:0 0 auto 0;z-index:20;color:#fff;mix-blend-mode:difference;display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;text-transform:lowercase;pointer-events:none}
.bar > *{pointer-events:auto}
.bar a{text-decoration:none}
.bar a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bar nav{display:flex;gap:22px;align-items:baseline}
.lang{opacity:.75}
.lang button{all:unset;cursor:pointer}
.lang button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px}

/* intro: the picture sits inside the title, then grows into the hero */
.case-intro{position:relative;height:100vh;min-height:520px;padding:56px 18px 18px}
.case-intro .hero{position:absolute;inset:56px 18px 18px;margin:0;overflow:hidden}
.case-intro .hero img{width:100%;height:100%;object-fit:cover;opacity:0;position:relative;z-index:2}
.case-intro.ready .hero img{opacity:1;transition:clip-path 1.15s cubic-bezier(.7,0,.2,1), transform 1.15s cubic-bezier(.7,0,.2,1)}
.case-intro .title{position:absolute;inset:56px 18px 18px;z-index:1;margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,26px);
  font-weight:400;font-size:clamp(44px,9.2vw,168px);line-height:1;letter-spacing:.02em;text-transform:uppercase;transition:opacity .4s ease .55s}
.case-intro .slot{flex:none;width:clamp(84px,15vw,260px);aspect-ratio:16/10}
.case-intro.open .title{opacity:0}
.scroll-hint{position:absolute;left:50%;bottom:30px;z-index:3;transform:translateX(-50%);color:#fff;font-size:15px;font-style:italic;opacity:0;transition:opacity .8s ease 1.1s;text-transform:lowercase}
.case-intro.open .scroll-hint{opacity:.9}

/* project info */
.info{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;padding:96px 18px 72px;max-width:1500px}
.info h1{font-size:clamp(30px,3.4vw,52px);font-weight:400;line-height:1.05;margin:0 0 18px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0;color:var(--ink)}
.facts dt{color:var(--muted);text-transform:lowercase}
.facts dd{margin:0;font-style:italic}
.lead{font-size:clamp(22px,2.1vw,30px);line-height:1.3;margin:0 0 18px}
.lead + p{color:var(--muted);margin:0;max-width:56ch}

/* images */
.work{display:flex;flex-direction:column;gap:18px;padding:0 18px}
.work figure{margin:0;overflow:hidden;background:var(--card)}
.work img{width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two figure img{height:100%;object-fit:cover}
.note{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;padding:90px 0 72px}
.note .k{color:var(--muted);text-transform:lowercase;margin:0}
.note p.q{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.3;font-style:italic;max-width:30ch}
.narrow, .work .narrow{max-width:1180px;margin-left:auto;margin-right:auto;width:100%}
.two.fit figure{background:transparent;display:flex;align-items:center}
.two.fit figure img{height:auto;object-fit:contain}

/* reveal on scroll, same as the projects list */
[data-reveal].rv{opacity:0;transform:translate3d(0,8%,0);transition:opacity 1.5s cubic-bezier(.19,1,.22,1), transform 1.5s cubic-bezier(.19,1,.22,1)}
[data-reveal].rv img{clip-path:inset(8%);transition:clip-path 2s cubic-bezier(.19,1,.22,1)}
[data-reveal].rv.in{opacity:1;transform:none}
[data-reveal].rv.in img{clip-path:inset(0)}

/* zoom: click any picture to see it large */
.work figure[data-zoom]{cursor:zoom-in}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){ .work figure[data-zoom]{cursor:none} }
.lightbox{position:fixed;inset:0;z-index:9000;overflow:auto;background:rgba(238,235,230,.97);padding:5vh 4vw;opacity:0;pointer-events:none;transition:opacity .35s ease;cursor:zoom-out}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{width:auto;max-width:min(1500px,100%);margin:auto;min-height:0;transform:scale(.97);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.lightbox.open img{transform:none}
.lightbox.short{display:flex;align-items:center;justify-content:center}
.lightbox.short img{max-height:90vh;object-fit:contain}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){ .lightbox{cursor:none} }

/* end */
.next{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:120px 18px 30px;border-bottom:1px solid var(--line);margin:0 18px;padding-left:0;padding-right:0;text-transform:lowercase}
.next a{text-decoration:none;font-size:clamp(34px,5vw,80px);line-height:1}
.next a:hover{font-style:italic}
.next .k{color:var(--muted)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:22px 18px 30px;color:var(--muted);text-transform:lowercase}

/* soap-bubble cursor (same as the home page) */
#bubble{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:opacity .35s;will-change:transform,opacity;
  background:
    radial-gradient(circle at 31% 26%, rgba(255,255,255,.95) 0 2.5px, rgba(255,255,255,0) 6px),
    radial-gradient(circle at 70% 77%, rgba(255,255,255,.55) 0 1.2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 50% 50%, rgba(255,222,234,.08) 0 52%, rgba(244,170,196,.28) 70%, rgba(228,120,162,.55) 86%, rgba(255,255,255,.2) 94%, rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 5px rgba(242,169,190,.55), inset 3px -3px 6px rgba(186,160,255,.35), inset -3px 3px 6px rgba(255,205,175,.4), 0 2px 10px rgba(228,120,162,.18)}
.bubble-word{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:14px;line-height:1;letter-spacing:.02em;color:#B4687F;white-space:nowrap;text-transform:lowercase;opacity:0;transition:opacity .35s ease} .bubble-word span{display:block;transform:translateY(3px);transition:transform .45s cubic-bezier(.19,1,.22,1)} .bubble-word.on{opacity:1} .bubble-word.on span{transform:none}
@media (pointer:coarse), (prefers-reduced-motion: reduce){ #bubble, .bubble-word{display:none} }

@media (max-width:760px){
  body{font-size:17px}
  .bar{padding:12px 16px}
  .case-intro{height:78vh;padding:48px 16px 16px}
  .case-intro .hero, .case-intro .title{inset:48px 16px 16px}
  .case-intro .title{flex-direction:column;gap:14px}
  .case-intro .slot{width:46vw}
  .info, .note{grid-template-columns:1fr;gap:20px}
  .info{padding:56px 16px 48px}
  .work{padding:0 16px;gap:12px}
  .two{grid-template-columns:1fr;gap:12px}
  .note{padding:56px 0 40px}
  .next{margin:0 16px;padding-top:80px}
}
@media (prefers-reduced-motion: reduce){
  .case-intro .hero img{opacity:1;clip-path:none !important}
  .case-intro .title{display:none}
}

/* more projects — a list like auge design's: a dark bar wipes down on hover, the picture opens from its centre */
.works{margin:110px 18px 0}
.works .k{color:var(--muted);text-transform:lowercase;margin:0 0 18px}
.works ul{list-style:none;margin:0;padding:0}
.works li{border-top:1px solid var(--ink)}
.works li:last-child{border-bottom:1px solid var(--ink)}
.works a{position:relative;display:grid;grid-template-columns:4fr 4fr 2fr 2fr;gap:18px;align-items:center;padding:20px 0;text-decoration:none;color:var(--ink);transition:color .5s cubic-bezier(.19,1,.22,1)}
.works a::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:center top;transition:transform 1s cubic-bezier(.19,1,.22,1);z-index:0}
.works a > span{position:relative;z-index:1}
.works .t{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(18px,1.6vw,24px);transition:padding .3s cubic-bezier(.165,.84,.44,1)}
.works .tags{font-style:italic;font-size:clamp(17px,1.4vw,21px)}
.works .y{text-align:right;transition:padding .3s cubic-bezier(.165,.84,.44,1)}
.works .pic{position:absolute;left:calc(100%/6);top:50%;width:calc(100%/6);aspect-ratio:4/3;transform:translateY(-50%);clip-path:inset(50%);transition:clip-path .75s cubic-bezier(.19,1,.22,1);pointer-events:none;z-index:2;overflow:hidden}
.works .pic img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.2);transition:transform 2s cubic-bezier(.19,1,.22,1)}
@media (hover:hover) and (pointer:fine){
  .works a:hover{color:var(--bg)}
  .works a:hover::after{transform:scaleY(1)}
  .works a:hover .t, .works a:hover .y{padding:0 18px}
  .works a:hover .pic{clip-path:inset(0)}
  .works a:hover .pic img{transform:scale(1)}
}
@media (max-width:999px){
  .works a{grid-template-columns:1fr auto;gap:4px 16px;padding:16px 0}
  .works .tags{grid-column:1}
  .works .sec{display:none}
  .works .pic{left:auto;right:22%;width:clamp(150px,26%,240px)}
  .works .y{grid-row:1;grid-column:2}
}
@media (hover:none){ .works .pic{display:none} }

/* dark footer, contact on the left */
.site-foot{margin-top:120px;background:var(--ink);color:var(--bg);padding:56px 18px 28px;display:grid;grid-template-columns:4fr 4fr 2fr 2fr;gap:18px}
.site-foot a{color:var(--bg)}
.site-foot .k{opacity:.75;text-transform:lowercase;margin:0 0 14px}
.site-foot .hi{font-size:clamp(22px,2.1vw,30px);line-height:1.25;margin:0 0 22px;max-width:22ch}
.site-foot .links{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.site-foot .meta{grid-column:1 / -1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:70px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--bg) 35%,transparent);opacity:.75;text-transform:lowercase}
@media (max-width:999px){ .site-foot{grid-template-columns:1fr;padding:44px 16px 24px;margin-top:80px} .works{margin:80px 16px 0} }

.site-foot .links.row{flex-direction:row;flex-wrap:wrap;gap:8px 28px;font-size:18px}

/* short project header + "more details" (like auge design / spiilka): the words wait behind a button, the pictures lead */
.brief{display:grid;grid-template-columns:2fr 4fr 6fr;gap:18px;padding:96px 18px 44px;align-items:start}
.brief .yr{color:var(--muted);margin:6px 0 0}
.brief h1{font-size:clamp(30px,3.4vw,52px);font-weight:400;line-height:1.05;margin:0 0 8px}
.brief .tags{font-style:italic;color:var(--muted);margin:0}
.brief .lead{margin:0 0 18px;max-width:32ch}
.more{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer;text-transform:lowercase}
.more .m-close, .more[aria-expanded="true"] .m-open{display:none}
.more[aria-expanded="true"] .m-close{display:inline}
.details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.19,1,.22,1);margin:0 18px}
.details.open{grid-template-rows:1fr}
.details > div{overflow:hidden;min-height:0}
.details .row{display:grid;grid-template-columns:6fr 6fr;gap:18px;border-top:1px solid var(--line);padding:18px 0 24px}
.details .row:first-child{margin-top:4px}
.details .row:last-child{border-bottom:1px solid var(--line);margin-bottom:44px}
.details .row .k{color:var(--muted);text-transform:lowercase;margin:0}
.details .row p{margin:0;max-width:56ch;line-height:1.5}
@media (max-width:760px){
  .brief{grid-template-columns:1fr;gap:10px;padding:56px 16px 32px}
  .brief .yr{order:-1}
  .details{margin:0 16px}
  .details .row{grid-template-columns:1fr;gap:6px}
}